|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <view class="bg">
|
|
|
+ <view class="header">
|
|
|
+ <radio-group class="option" @change="radioChange">
|
|
|
+ <label class="radio">
|
|
|
+ <radio checked color="#498ef5" value="1" /><text
|
|
|
+ style="font-weight: 600; padding-left: 10rpx"
|
|
|
+ >遇到问题</text
|
|
|
+ >
|
|
|
+ </label>
|
|
|
+ <label class="radio">
|
|
|
+ <radio color="#498ef5" value="2" /><text
|
|
|
+ style="font-weight: 600; padding-left: 10rpx"
|
|
|
+ >使用建议</text
|
|
|
+ >
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="form">
|
|
|
+ <view class="content">
|
|
|
+ <textarea
|
|
|
+ maxlength="250"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ class=""
|
|
|
+ v-model="form.content"
|
|
|
+ ></textarea>
|
|
|
+ <view class="uplaod">
|
|
|
+ <van-uploader
|
|
|
+ accept="image"
|
|
|
+ @delete="deleteAdviseImg"
|
|
|
+ :max-count="4"
|
|
|
+ :file-list="fileList"
|
|
|
+ @after-read="afterRead"
|
|
|
+ >
|
|
|
+ <image style="width: 80px; height: 80px" :src="i"></image>
|
|
|
+ </van-uploader>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="phone">
|
|
|
+ <input
|
|
|
+ v-model="form.phone"
|
|
|
+ placeholder="请填写手机号码"
|
|
|
+ class="phone-input"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="submit">
|
|
|
+ <view @click="submitAdvise" class="submit-button">提交</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import store from "@/store";
|
|
|
+import api from "@/api";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ content: "",
|
|
|
+ phone: "",
|
|
|
+ type: "1",
|
|
|
+ imgs: "",
|
|
|
+ },
|
|
|
+ uploadUrl:
|
|
|
+ process.env.NODE_ENV === "development"
|
|
|
+ ? "https://nbjk1.zzxcx.net/nbjk-admin/"
|
|
|
+ : "https://nbjk.zzxcx.net/nbjk-admin/",
|
|
|
+ i: "https://ct-1305573081.cos.ap-shanghai.myqcloud.com/ctjk/mp-wx/userAdvise/upload_icon.png",
|
|
|
+ fileList: [],
|
|
|
+ placeholder:
|
|
|
+ "遇到的问题如下：1、打开了某个页面2、执行某个操作遇到了什么问题3、其他附加描述",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deleteAdviseImg(e){
|
|
|
+ console.log(e)
|
|
|
+ let fileList= this.fileList.filter((item,index)=>{
|
|
|
+ return e.detail.index!==index
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ this.fileList =fileList
|
|
|
+
|
|
|
+ },
|
|
|
+ submitAdvise(e) {
|
|
|
+ console.log(e);
|
|
|
+ let that = this;
|
|
|
+ var res = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;
|
|
|
+ if (!res.test(this.form.phone)) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "error",
|
|
|
+ title: "手机号格式错误",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ api.advise
|
|
|
+ .studentFeedBack({
|
|
|
+ ...that.form,
|
|
|
+ imgIds: that.fileList.map((item) => item.id).join(","),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "成功",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ afterRead(e) {
|
|
|
+ console.log(e);
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: that.uploadUrl + "/student/file/info/uploadImage",
|
|
|
+ filePath: e.detail.file.url,
|
|
|
+ name: "img",
|
|
|
+ header: {
|
|
|
+ Authorization: store.state.user.tokenObj.token
|
|
|
+ ? "Bearer " + store.state.user.tokenObj.token
|
|
|
+ : "",
|
|
|
+ "Content-Type": "application/json;charset=utf8",
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ businessType: that.form.type,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ var resData = JSON.parse(res.data);
|
|
|
+
|
|
|
+ if (resData.code == 200) {
|
|
|
+ that.fileList.push({
|
|
|
+ url: e.detail.file.url,
|
|
|
+ id: resData.data,
|
|
|
+ name: resData.data,
|
|
|
+ isImage:true
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "error",
|
|
|
+ title: "上传失败",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ radioChange(e) {
|
|
|
+ this.form.type = e.detail.value;
|
|
|
+ this.placeholder =
|
|
|
+ e.detail.value == "1"
|
|
|
+ ? "遇到的问题如下：1、打开了某个页面2、执行某个操作遇到了什么问题3、其他附加描述"
|
|
|
+ : "请详细描述您在使用视频APP时的想法和建议";
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ background: #fff;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+.inline-block {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.header {
|
|
|
+ padding-left: 114rpx;
|
|
|
+ padding-right: 114rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .option {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 56rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.form {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .phone {
|
|
|
+ margin-top: 50rpx;
|
|
|
+ .phone-input {
|
|
|
+ height: 108rpx;
|
|
|
+ line-height: 108rpx;
|
|
|
+ background: rgba(242, 243, 245, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 54rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(242, 243, 245, 1);
|
|
|
+ height: 456rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .uplaod {
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 32rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ z-index: 999;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content > textarea {
|
|
|
+ width: 630rpx;
|
|
|
+
|
|
|
+ height: 220rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.submit {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 80rpx;
|
|
|
+ width: 100%;
|
|
|
+ .submit-button {
|
|
|
+ width: 530rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: rgba(73, 142, 245, 1);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
