4D_uniapp_service/pages/account/complaint.vue

<template>
	<view>
		 <uni-nav-bar :fixed="true" shadow left-icon="left" title="意见反馈" :statusBar="true" @clickLeft="handleToBack" />
		<view class="content">
		  <view style="padding: 42upx">
		    <view class="title_wrap">
		      <text class="title_prefix">*</text>问题类型</view
		    >
		    <view class="content_wrap" @tap="handleOpenPopup"
		      ><text> {{ items[current]?.name || "请选择问题" }}</text>
		      <image
		        class="card_thumbnail"
		        src="/static/common/right.png"
		        mode="aspectFill"
		        style="width: 14upx; height: 24upx"
		      />
		    </view>
		    <view class="title_wrap">
		      <text class="title_prefix">*</text>问题详情</view
		    >
		    <view class="content_wrap" style="height: auto; flex-direction: column">
		      <textarea
		        auto-height
		        :maxlength="100"
		        placeholder="请描述您遇到的相关问题或功能建议，请上传手机截图，我们将为您不断改进。"
		        style="
		          min-height: 150upx;
		          font-size: 24upx;
		          font-weight: 400;
		          color: #999999;
		        "
		        v-model="params.idea"
		      />
		      <view style="width: 100%; display: flex; justify-content: flex-end"
		        >{{ params.idea.length }}/100</view
		      >
		    </view>
		
		    <!-- <view class="title_wrap">
		      截图或图片<text class="title_suffix">（最多上传3张）</text></view
		    > -->
		  </view>
		
		  <view class="footer">
		    <image mode="widthFix" src="/static/images/footer.png" />
		  </view>
		
		  <view class="footer_btn_wrap flex align-center" style="position: fixed">
		    <view class="footer_btn" @tap="handleSubmit"> 提交 </view>
		  </view>
		
		  <uni-popup ref="popup" background-color="#fff">
		    <view class="uni-list">
		      <radio-group @change="handleRadioChange" style="padding: 20upx">
		        <label
		          class="flex align-center justify-between"
		          style="padding-left: 40upx"
		          v-for="(item, index) in items"
		          :key="index"
		        >
		          <view>{{ item.name }}</view>
		          <view>
		            <radio
		              :value="`${index}`"
		              :checked="index == current"
		              style="margin: 20upx"
		            />
		          </view>
		        </label>
		      </radio-group>
		    </view>
		  </uni-popup>
		</view>
	</view>

</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import request from "/common/request.js";
import auth from "/common/auth.js";

const statusBarHeight = ref();

onLoad((option) => {
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
});

onShow(() => {
  auth();
  uni.$emit('fastOrderNum', false);
  uni.$emit('receiveOrdernum', false);
});

const params = reactive({
  idea: "",
});
const current = ref(0);
const items = reactive([
  { value: "1", name: "订单问题" },
  { value: "2", name: "功能问题" },
  { value: "3", name: "账号问题" },
  { value: "4", name: "操作问题" },
  { value: "5", name: "BUG反馈" },
  { value: "6", name: "其他" },
]);
const popup = ref();
const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};
const handleSubmit = () => {
  if (!params.idea.trim()) {
    uni.showToast({
      title: "请填写意见",
      duration: 2000,
      icon: "none",
    });
    return;
  }

  uni.showLoading();
  request({
    url: "/api/user/addIdea",
    method: "POST",
    data: {
      ...params,
      type: items[current.value].value,
    },
    success: (res) => {
      console.log("投诉建议", res);
      uni.hideLoading();
      uni.showToast({
        title: res.data?.msg,
        duration: 2000,
        icon: "none",
      });
      if (res.data.code == 1) {
        setTimeout(function () {
          const canNavBack = getCurrentPages();
          if (canNavBack && canNavBack.length > 1) {
            uni.navigateBack();
          } else {
            history.back();
          }
        }, 1500);
      }
    },
    fail: () => {
      uni.hideLoading();
    },
    complete: () => {},
  });
};
const handleOpenPopup = () => {
  popup.value.open("bottom");
};
const handleRadioChange = (e) => {
  console.log("选择", e);
  current.value = e.detail.value;
  popup.value.close();
};
</script>

<style lang="scss" scoped>
.content {
  .title_wrap {
    font-size: 28upx;
    font-weight: 400;
    font-family: Verdana;
    color: #333333;
    margin: 42upx 0 24upx;
    .title_prefix {
      color: #ff490e;
      margin-right: 5upx;
    }
    .title_suffix {
      font-size: 26upx;
      color: #999999;
    }
  }
  .content_wrap {
    width: 670upx;
    height: 80upx;
    background: #ffffff;
    border: 1upx solid #cccccc;
    border-radius: 10upx;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20upx;

    font-size: 24upx;
    font-weight: 400;
    color: #999999;
  }

  uni-radio {
    &::before {
      content: "";
    }
  }
}
</style>