Feat(店铺入驻):增加视频封面配置

pkg_join/views/shop.vue

@@ -16,18 +16,80 @@
           </template>
         </u-cell>
       </u-form-item>
-
+      <u-form-item prop="coverType">
-      <u-form-item prop="cover">
+        <u-cell title="封面类型" :border="false">
-        <u-cell title="店铺封面图" :border="false">
+          <template #icon>
+            <text class="required">*</text>
+          </template>
+          <template #value>
+            <u-radio-group
+              v-model="form.coverType"
+              placement="row"
+            >
+              <u-radio
+                :name="1"
+                :customStyle="{marginRight: '16px'}"
+                active-color="red"
+                label="图片"
+              />
+              <u-radio
+                :name="2"
+                active-color="red"
+                label="视频"
+              />
+            </u-radio-group>
+          </template>
+        </u-cell>
+      </u-form-item>
+      <u-form-item v-if="form.coverType === 1" prop="cover">
+        <u-cell title="店铺图片封面" :border="false">
           <template #icon>
             <text class="required">*</text>
           </template>
         </u-cell>
         <u-cell :border="false">
           <template #title>
-            <view class="box-upload" @click="chooseLogoImg('cover')">
+            <view
-              <view class="btn-upload" v-if="form.cover.length===0 || form.cover==null">上传图片</view>
+              class="box-upload"
-              <image class="img-preview" :src="form.cover" v-else/>
+              @click="chooseLogoImg('cover')"
+            >
+              <view
+                v-if="!form.cover"
+                class="btn-upload"
+              >上传图片</view>
+              <image
+                v-else
+                :src="form.cover"
+                class="img-preview"
+              />
+            </view>
+          </template>
+        </u-cell>
+      </u-form-item>
+      <u-form-item v-if="form.coverType === 2" prop="coverVideo">
+        <u-cell title="店铺视频封面" :border="false">
+          <template #icon>
+            <text class="required">*</text>
+          </template>
+        </u-cell>
+        <u-cell :border="false">
+          <template #title>
+            <view
+              class="box-upload"
+              @click="chooseLogoVideo()"
+            >
+              <view
+                v-if="!form.coverVideo"
+                class="btn-upload"
+              >上传视频</view>
+              <video
+                v-else
+                :src="form.coverVideo"
+                :poster="form.coverVideo + '?vframe/jpg/offset/1'"
+                :controls="false"
+                play-btn-position="center"
+                class="video-item"
+              />
             </view>
           </template>
         </u-cell>
@@ -241,36 +303,50 @@
 </template>
 
 <script>
-import CitySelect from "@/components/CitySelect";
+import CitySelect from "@/components/CitySelect"
-import {getShopData, getShopInfo, removeApply, saveShop} from "@/api/join";
+import {
-import {getCity, registerVerify} from "@/api/user";
+  getShopData,
-import {chooseImage, moreImage, uploadImage} from "@/utils";
+  getShopInfo,
+  removeApply,
+  saveShop
+} from "@/api/join"
+import {
+  getCity,
+  registerVerify
+} from "@/api/user"
+import {
+  chooseImage,
+  moreImage,
+  uploadImage,
+  chooseVideoToUpload
+} from "@/utils"
 
 export default {
-  name: "pkgJoinShop",
+  name: "PkgJoinShop",
   components: {
     CitySelect
   },
   data() {
     return {
       partnerId: null,
-
       pics: [],
       quaPics: [],
-      tips: "",
+      tips: '',
       form: {
-        name: "",
+        name: '',
-        cover: "",
+        cover: '',
-        logo: "",
+        coverVideo: '',
-        qualification: "",
+        coverType: 1, // coverType: 1-图片,2-视频
+        logo: '',
+        qualification: '',
         type: 0,
-        typeText: "",
+        typeText: '',
-        phone: "",
+        phone: '',
-        captcha: "",
+        captcha: '',
-        area: "",
+        area: '',
-        address: "",
+        address: '',
-        position: "",
+        position: '',
-        content: ""
+        content: ''
       },
       rules: {
         'name': {
@@ -282,7 +358,13 @@ export default {
         'cover': {
           type: 'string',
           required: true,
-          message: '请上传店铺封面图',
+          message: '请上传店铺图片封面',
+          trigger: ['blur', 'change']
+        },
+        'coverVideo': {
+          type: 'string',
+          required: true,
+          message: '请上传店铺视频方面',
           trigger: ['blur', 'change']
         },
         'logo': {
@@ -340,23 +422,19 @@ export default {
           trigger: ['blur', 'change']
         }
       },
-
       showType: false,
       columnsType: [],
       indexType: [0],
-
       district: [],
       address: {},
-
       isAgree: false,
       show: false,
-      notice: "",
+      notice: '',
       showRemove: false,
-
       isDraft: null,
       reviewStatus: null,
-      stateTitle: "",
+      stateTitle: '',
-      stateType: "primary",
+      stateType: 'primary',
       isPass: false
     }
   },
@@ -458,6 +536,11 @@ export default {
         this.form[target] = img;
       });
     },
+    chooseLogoVideo() {
+      chooseVideoToUpload(path => {
+        this.form.coverVideo = path
+      })
+    },
 
     chooseShopImg() {
       let that = this;
@@ -593,8 +676,11 @@ export default {
         this.form.qualification += (item.url + ",");
       })
       this.form.qualification = this.form.qualification.substring(0, this.form.qualification.length - 1);
-
+      const postData = Object.assign({}, this.form)
-      saveShop(this.form, this.partnerId).then(res => {
+      if (postData.coverType === 2) {
+        postData.cover = postData.coverVideo
+      }
+      saveShop(postData, this.partnerId).then(res => {
         if (res.status === 200) {
           uni.showToast({
             title: "您的入驻申请已提交成功，请耐心等待审核",
@@ -643,4 +729,8 @@ export default {
 .font-color-red {
   font-size: 22rpx;
 }
+.video-item {
+  width: 80px;
+  height: 80px;
+}
 </style>

utils/index.js

@@ -1059,6 +1059,51 @@ export function chooseImage(callback) {
     });
 }
 
+export function chooseVideoToUpload(callback) {
+    uni.chooseVideo({
+        count: 1,
+        sourceType: ['album', 'camera'],
+        success: res => {
+            const { tempFilePath, size } = res
+            if (size / 1024 / 1024 > 30) {
+                uni.showToast({
+                    title: '视频文件超过30MB',
+                    icon: 'none',
+                    duration: 2000
+                })
+                return
+            }
+            uni.showLoading({
+                title: '视频上传中',
+                mask: true
+            })
+            uni.uploadFile({
+                url: `${VUE_APP_API_URL}/api/upload`,
+                filePath: tempFilePath,
+                header: {
+                    Authorization: 'Bearer ' + store.getters.token
+                },
+                name: 'file',
+                success: response => {
+                    if (callback) {
+                        callback(JSON.parse(response.data).link)
+                    }
+                },
+                fail: err => {
+                    uni.showToast({
+                        title: '上传视频失败' + err,
+                        icon: 'none',
+                        duration: 2000
+                    })
+                },
+                complete: () => {
+                    uni.hideLoading()
+                }
+            })
+        }
+    })
+}
+
 export function moreImage(count, callback) {
     uni.chooseImage({
         count,