Browse Source
feat: 添加H5环境支持及功能优化
- 新增H5环境专属页面promotionH5.vue用于邀请好友功能 - 优化支付逻辑，区分微信小程序和H5环境的支付方式 - 重构wxPay方法返回Promise以支持async/await - 修复表单组件样式问题及地址选择逻辑 - 添加H5环境URL参数解析功能 - 优化canvas绘制逻辑和图片保存体验master
12 changed files with 1092 additions and 498 deletions
Split View
Diff Options
-
+5 -0components/couponList/couponList.vue
-
+19 -0main.js
-
+3 -0pages.json
-
+8 -0pages/index/center.vue
-
+12 -23pages_order/components/formTextarea.vue
-
+379 -385pages_order/mine/cooperation.vue
-
+1 -1pages_order/mine/partner.vue
-
+56 -52pages_order/mine/promotion.vue
-
+563 -0pages_order/mine/promotionH5.vue
-
+9 -1pages_order/order/createOrder.vue
-
+3 -2store/store.js
-
+34 -34utils/pay.js
+ 5
- 0
components/couponList/couponList.vue
View File
+ 19
- 0
main.js
View File
+ 3
- 0
pages.json
View File
+ 8
- 0
pages/index/center.vue
View File
+ 12
- 23
pages_order/components/formTextarea.vue
View File
| @ -1,40 +1,29 @@ | |||
| <template> | |||
| <uv-textarea | |||
| :value="value" | |||
| @input="$emit('input', $event)" | |||
| :placeholder="placeholder" | |||
| height="175rpx" | |||
| border="none" | |||
| :customStyle="{ | |||
| <uv-textarea :value="value" @input="$emit('input', $event)" :placeholder="placeholder" height="175rpx" border="none" | |||
| :customStyle="{ | |||
| backgroundColor: '#F5F5F5', | |||
| borderRadius: '6rpx', | |||
| }" | |||
| :placeholderStyle="{ | |||
| color: '#999999', | |||
| fontSize: '28rpx', | |||
| }" | |||
| ></uv-textarea> | |||
| }" placeholderStyle="color: '#999999'; | |||
| fontSize: '28rpx';"></uv-textarea> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props: { | |||
| props: { | |||
| value: { | |||
| default: null | |||
| }, | |||
| placeholder: { | |||
| type: String, | |||
| placeholder: { | |||
| type: String, | |||
| default: '请输入' | |||
| }, | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| methods: { | |||
| }, | |||
| } | |||
| return {} | |||
| }, | |||
| methods: {}, | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
+ 379
- 385
pages_order/mine/cooperation.vue
View File
| @ -1,405 +1,399 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="page"> | |||
| <!-- 导航栏 --> | |||
| <navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" /> | |||
| <view v-if="['0', '2'].includes(status) && statusDesc" class="flex tips"> | |||
| <uv-icon name="info-circle" color="#86A941" size="28rpx"></uv-icon> | |||
| <text style="margin-left: 3rpx;">{{ statusDesc }}</text> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="form"> | |||
| <view class="form-title">门头照片</view> | |||
| <view class="card upload"> | |||
| <formUpload v-model="form.image"> | |||
| <template v-slot="{ value }"> | |||
| <view class="flex"> | |||
| <image v-if="value" | |||
| class="upload-img" | |||
| :src="value" | |||
| mode="aspectFill" | |||
| /> | |||
| <image v-else | |||
| class="upload-img" | |||
| src="../static/cooperation/icon-upload.png" | |||
| mode="aspectFill" | |||
| /> | |||
| </view> | |||
| </template> | |||
| </formUpload> | |||
| </view> | |||
| </view> | |||
| <view class="form"> | |||
| <view class="form-title">店铺信息</view> | |||
| <view class="card info"> | |||
| <uv-form | |||
| ref="form" | |||
| :model="form" | |||
| :rules="rules" | |||
| labelPosition="left" | |||
| labelWidth="150rpx" | |||
| :labelStyle="{ | |||
| <view v-if="['0', '2'].includes(status) && statusDesc" class="flex tips"> | |||
| <uv-icon name="info-circle" color="#86A941" size="28rpx"></uv-icon> | |||
| <text style="margin-left: 3rpx;">{{ statusDesc }}</text> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="form"> | |||
| <view class="form-title">门头照片</view> | |||
| <view class="card upload"> | |||
| <formUpload v-model="form.image"> | |||
| <template v-slot="{ value }"> | |||
| <view class="flex"> | |||
| <image v-if="value" class="upload-img" :src="value" mode="aspectFill" /> | |||
| <image v-else class="upload-img" src="../static/cooperation/icon-upload.png" | |||
| mode="aspectFill" /> | |||
| </view> | |||
| </template> | |||
| </formUpload> | |||
| </view> | |||
| </view> | |||
| <view class="form"> | |||
| <view class="form-title">店铺信息</view> | |||
| <view class="card info"> | |||
| <uv-form ref="form" :model="form" :rules="rules" labelPosition="left" labelWidth="150rpx" | |||
| :labelStyle="{ | |||
| color: '#000000', | |||
| fontSize: '28rpx', | |||
| }" | |||
| > | |||
| <view class="form-item"> | |||
| <uv-form-item label="店铺名称" prop="shop"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.shop" placeholder="请输入店铺名称"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="您的姓名" prop="name"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.name" placeholder="请输入您的姓名"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="联系手机号" prop="phone"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="所在地区" prop="area"> | |||
| <view class="form-item-content flex area"> | |||
| <text>{{ form.area ? form.area : '请选择' }}</text> | |||
| <button plain class="btn area-btn" @click="selectAddr"> | |||
| <image class="area-btn-icon" src="../static/cooperation/icon-arrow.png" mode="widthFix"></image> | |||
| </button> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item address"> | |||
| <uv-form-item label="详细地址" prop="address" labelPosition="top" > | |||
| <view style="margin-top: 22rpx;"> | |||
| <formTextarea | |||
| v-model="form.address" | |||
| placeholder="请输入详细地址" | |||
| ></formTextarea> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| </uv-form> | |||
| </view> | |||
| </view> | |||
| <view class="tools" v-if="status != '1'"> | |||
| <button plain class="btn btn-submit" @click="onSubmit">提交</button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| }"> | |||
| <view class="form-item"> | |||
| <uv-form-item label="店铺名称" prop="shop"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.shop" placeholder="请输入店铺名称"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="您的姓名" prop="name"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.name" placeholder="请输入您的姓名"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="联系手机号" prop="phone"> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item label="所在地区" prop="area"> | |||
| <view class="form-item-content flex area"> | |||
| <view style="width: 450rpx;">{{ form.area ? form.area : '请选择' }}</view> | |||
| <button plain class="btn area-btn" @click="selectAddr"> | |||
| <image class="area-btn-icon" src="../static/cooperation/icon-arrow.png" | |||
| mode="widthFix"></image> | |||
| </button> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item address"> | |||
| <uv-form-item label="详细地址" prop="address" labelPosition="top"> | |||
| <view style="margin-top: 22rpx;width: 100%;"> | |||
| <formTextarea v-model="form.address" placeholder="请输入详细地址"></formTextarea> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| </uv-form> | |||
| </view> | |||
| </view> | |||
| <view class="tools" v-if="status != '1'"> | |||
| <button plain class="btn btn-submit" @click="onSubmit">提交</button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| import Position from '@/utils/position.js' | |||
| import formInput from '../components/formInput.vue' | |||
| import formUpload from '../components/formUpload.vue' | |||
| import formTextarea from '../components/formTextarea.vue' | |||
| export default { | |||
| components: { | |||
| formInput, | |||
| formUpload, | |||
| formTextarea, | |||
| }, | |||
| data() { | |||
| return { | |||
| id: null, | |||
| status: null, | |||
| statusDesc: null, | |||
| form: { | |||
| image: null, | |||
| shop: null, | |||
| name: null, | |||
| phone: null, | |||
| area: null, | |||
| latitude: null, | |||
| longitude: null, | |||
| address: null, | |||
| }, | |||
| rules: { | |||
| 'image': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请选择门头照片', | |||
| }, | |||
| 'shop': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入店铺名称', | |||
| }, | |||
| 'name': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入您的姓名', | |||
| }, | |||
| 'phone': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入您的手机号', | |||
| }, | |||
| 'area': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请选择所在地区', | |||
| }, | |||
| 'address': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入详细地址', | |||
| }, | |||
| }, | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| }, | |||
| onLoad() { | |||
| this.initData() | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.updateStatus() | |||
| }, | |||
| methods: { | |||
| //地图上选择地址 | |||
| selectAddr() { | |||
| // Position.getLocation(res => { | |||
| Position.selectAddress(0, 0, success => { | |||
| this.setAddress(success) | |||
| }) | |||
| // }) | |||
| }, | |||
| //提取用户选择的地址信息复制给表单数据 | |||
| setAddress(res) { | |||
| //经纬度信息 | |||
| this.form.latitude = res.latitude | |||
| this.form.longitude = res.longitude | |||
| if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
| return this.form.area = res.name | |||
| } | |||
| if (res.address || res.name) { | |||
| return this.form.area = res.address + res.name | |||
| } | |||
| this.form.area = '' //用户啥都没选就点击勾选 | |||
| }, | |||
| async initData() { | |||
| try { | |||
| const shopDetails = (await this.$fetch('queryShopById')) | |||
| console.log("shopDetails======") | |||
| console.log(shopDetails) | |||
| if (!shopDetails) { | |||
| return | |||
| } | |||
| const { | |||
| id, | |||
| status, | |||
| status_dictText, | |||
| remark, | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } = shopDetails | |||
| this.form = { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } | |||
| this.id = id | |||
| this.status = status | |||
| this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText | |||
| } catch (err) { | |||
| } | |||
| }, | |||
| async updateStatus() { | |||
| if (!this.id) { | |||
| return | |||
| } | |||
| try { | |||
| const { status, status_dictText, remark } = await this.$fetch('queryShopById', { id: this.id }) | |||
| this.status = status | |||
| this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText | |||
| } catch (err) { | |||
| console.log('--err', err) | |||
| } | |||
| uni.stopPullDownRefresh(); | |||
| }, | |||
| async onSubmit() { | |||
| try { | |||
| await this.$refs.form.validate() | |||
| const { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } = this.form | |||
| const params = { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } | |||
| let api = this.id ? 'updateShop' : 'addShop' | |||
| await this.$fetch(api, params) | |||
| uni.showToast({ | |||
| title: '提交成功', | |||
| icon: 'none' | |||
| }) | |||
| setTimeout(uni.navigateBack, 1000, -1) | |||
| } catch (err) { | |||
| } | |||
| }, | |||
| }, | |||
| } | |||
| import { | |||
| mapState | |||
| } from 'vuex' | |||
| import Position from '@/utils/position.js' | |||
| import formInput from '../components/formInput.vue' | |||
| import formUpload from '../components/formUpload.vue' | |||
| import formTextarea from '../components/formTextarea.vue' | |||
| export default { | |||
| components: { | |||
| formInput, | |||
| formUpload, | |||
| formTextarea, | |||
| }, | |||
| data() { | |||
| return { | |||
| id: null, | |||
| status: null, | |||
| statusDesc: null, | |||
| form: { | |||
| image: null, | |||
| shop: null, | |||
| name: null, | |||
| phone: null, | |||
| area: null, | |||
| latitude: null, | |||
| longitude: null, | |||
| address: null, | |||
| }, | |||
| rules: { | |||
| 'image': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请选择门头照片', | |||
| }, | |||
| 'shop': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入店铺名称', | |||
| }, | |||
| 'name': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入您的姓名', | |||
| }, | |||
| 'phone': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入您的手机号', | |||
| }, | |||
| 'area': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请选择所在地区', | |||
| }, | |||
| 'address': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入详细地址', | |||
| }, | |||
| }, | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| }, | |||
| onLoad() { | |||
| this.initData() | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.updateStatus() | |||
| }, | |||
| methods: { | |||
| //地图上选择地址 | |||
| selectAddr() { | |||
| // Position.getLocation(res => { | |||
| Position.selectAddress(0, 0, success => { | |||
| this.setAddress(success) | |||
| }) | |||
| // }) | |||
| }, | |||
| //提取用户选择的地址信息复制给表单数据 | |||
| setAddress(res) { | |||
| //经纬度信息 | |||
| this.form.latitude = res.latitude | |||
| this.form.longitude = res.longitude | |||
| if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
| return this.form.area = res.name | |||
| } | |||
| if (res.address || res.name) { | |||
| return this.form.area = res.address + res.name | |||
| } | |||
| this.form.area = '' //用户啥都没选就点击勾选 | |||
| }, | |||
| async initData() { | |||
| try { | |||
| const shopDetails = (await this.$fetch('queryShopById')) | |||
| console.log("shopDetails======") | |||
| console.log(shopDetails) | |||
| if (!shopDetails) { | |||
| return | |||
| } | |||
| const { | |||
| id, | |||
| status, | |||
| status_dictText, | |||
| remark, | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } = shopDetails | |||
| this.form = { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } | |||
| this.id = id | |||
| this.status = status | |||
| this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText | |||
| } catch (err) { | |||
| } | |||
| }, | |||
| async updateStatus() { | |||
| if (!this.id) { | |||
| return | |||
| } | |||
| try { | |||
| const { | |||
| status, | |||
| status_dictText, | |||
| remark | |||
| } = await this.$fetch('queryShopById', { | |||
| id: this.id | |||
| }) | |||
| this.status = status | |||
| this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText | |||
| } catch (err) { | |||
| console.log('--err', err) | |||
| } | |||
| uni.stopPullDownRefresh(); | |||
| }, | |||
| async onSubmit() { | |||
| try { | |||
| await this.$refs.form.validate() | |||
| const { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } = this.form | |||
| const params = { | |||
| image, | |||
| shop, | |||
| name, | |||
| phone, | |||
| area, | |||
| latitude, | |||
| longitude, | |||
| address, | |||
| } | |||
| let api = this.id ? 'updateShop' : 'addShop' | |||
| await this.$fetch(api, params) | |||
| uni.showToast({ | |||
| title: '提交成功', | |||
| icon: 'none' | |||
| }) | |||
| setTimeout(uni.navigateBack, 1000, -1) | |||
| } catch (err) { | |||
| } | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| background-color: $uni-bg-color; | |||
| min-height: 100vh; | |||
| /deep/ .nav-bar__view { | |||
| background-image: linear-gradient(#84A73F, #D8FF8F); | |||
| } | |||
| } | |||
| .tips { | |||
| padding: 5rpx 0; | |||
| font-weight: bold; | |||
| font-size: 28rpx; | |||
| color: $uni-color; | |||
| background-color: rgba($color: #D8FF8F, $alpha: 0.3); | |||
| } | |||
| .content { | |||
| padding: 28rpx 30rpx; | |||
| } | |||
| .form { | |||
| & + & { | |||
| margin-top: 44rpx; | |||
| } | |||
| &-title { | |||
| color: #000000; | |||
| font-size: 28rpx; | |||
| margin-bottom: 15rpx; | |||
| } | |||
| &-item { | |||
| padding-left: 8rpx; | |||
| & + & { | |||
| // margin-top: 20rpx; | |||
| border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69); | |||
| } | |||
| &-content { | |||
| min-height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: flex-end; | |||
| font-size: 28rpx;; | |||
| color: #999999; | |||
| } | |||
| } | |||
| } | |||
| .upload { | |||
| padding: 37rpx 22rpx; | |||
| &-img { | |||
| width: 131rpx; height: 131rpx; | |||
| } | |||
| } | |||
| .area { | |||
| color: #000000; | |||
| font-size: 28rpx; | |||
| line-height: 40rpx; | |||
| justify-content: flex-end; | |||
| &-btn { | |||
| border: none; | |||
| padding: 7rpx 20rpx 7rpx 7rpx; | |||
| &-icon { | |||
| width: 30rpx; | |||
| height: auto; | |||
| } | |||
| } | |||
| } | |||
| .address { | |||
| padding: 0; | |||
| /deep/ .uv-form-item__body__left__content { | |||
| margin-top: 10rpx; | |||
| padding-left: 8rpx; | |||
| } | |||
| } | |||
| .tools { | |||
| padding: 0 56rpx; | |||
| margin-top: 126rpx; | |||
| } | |||
| .btn-submit { | |||
| padding: 29rpx 0; | |||
| border: none; | |||
| font-size: 36rpx; | |||
| border-radius: 45rpx; | |||
| color: $uni-text-color-inverse; | |||
| background-image: linear-gradient(to right, #84A73F, #D8FF8F); | |||
| } | |||
| .tips { | |||
| padding: 5rpx 0; | |||
| font-weight: bold; | |||
| font-size: 28rpx; | |||
| color: $uni-color; | |||
| background-color: rgba($color: #D8FF8F, $alpha: 0.3); | |||
| } | |||
| .content { | |||
| padding: 28rpx 30rpx; | |||
| } | |||
| .form { | |||
| &+& { | |||
| margin-top: 44rpx; | |||
| } | |||
| &-title { | |||
| color: #000000; | |||
| font-size: 28rpx; | |||
| margin-bottom: 15rpx; | |||
| } | |||
| &-item { | |||
| padding-left: 8rpx; | |||
| &+& { | |||
| // margin-top: 20rpx; | |||
| border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69); | |||
| } | |||
| &-content { | |||
| min-height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: flex-end; | |||
| font-size: 28rpx; | |||
| ; | |||
| color: #999999; | |||
| } | |||
| } | |||
| } | |||
| .upload { | |||
| padding: 37rpx 22rpx; | |||
| &-img { | |||
| width: 131rpx; | |||
| height: 131rpx; | |||
| } | |||
| } | |||
| .area { | |||
| color: #000000; | |||
| font-size: 28rpx; | |||
| line-height: 40rpx; | |||
| justify-content: flex-end; | |||
| &-btn { | |||
| border: none; | |||
| padding: 7rpx 20rpx 7rpx 7rpx; | |||
| &-icon { | |||
| width: 30rpx; | |||
| height: auto; | |||
| } | |||
| } | |||
| } | |||
| .address { | |||
| padding: 0; | |||
| /deep/ .uv-form-item__body__left__content { | |||
| margin-top: 10rpx; | |||
| padding-left: 8rpx; | |||
| } | |||
| } | |||
| .tools { | |||
| padding: 0 56rpx; | |||
| margin-top: 126rpx; | |||
| } | |||
| .btn-submit { | |||
| padding: 29rpx 0; | |||
| border: none; | |||
| font-size: 36rpx; | |||
| border-radius: 45rpx; | |||
| color: $uni-text-color-inverse; | |||
| background-image: linear-gradient(to right, #84A73F, #D8FF8F); | |||
| } | |||
| </style> | |||
+ 1
- 1
pages_order/mine/partner.vue
View File
+ 56
- 52
pages_order/mine/promotion.vue
View File
+ 563
- 0
pages_order/mine/promotionH5.vue
View File
| @ -0,0 +1,563 @@ | |||
| <template> | |||
| <view class="placard"> | |||
| <view class="placard-content"> | |||
| <!-- H5环境显示最终图片 --> | |||
| <view v-if="tempFilePath" class="img-box" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"> | |||
| <img | |||
| :src="tempFilePath" | |||
| :style="{ width: canvasW + 'px', height: canvasH + 'px' }" | |||
| @contextmenu.prevent | |||
| style="display: block; border-radius: 10px;" | |||
| /> | |||
| </view> | |||
| <!-- 生成中的提示 --> | |||
| <view v-else class="loading-box" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"> | |||
| <view class="loading-content"> | |||
| <view class="loading-spinner"></view> | |||
| <text class="loading-text"> | |||
| {{ !userId ? '获取用户信息中...' : '海报生成中...' }} | |||
| </text> | |||
| </view> | |||
| </view> | |||
| <!-- 二维码组件 - 隐藏 --> | |||
| <view v-if="userId" class="qrcode" ref="qrcode"> | |||
| <uv-qrcode | |||
| :value="qrCodeValue" | |||
| :size="qrCodeSize" | |||
| type="image/png" | |||
| ref="qrCodeComponent" | |||
| @complete="onQRCodeComplete"> | |||
| </uv-qrcode> | |||
| </view> | |||
| <!-- 画布 - 隐藏 --> | |||
| <canvas | |||
| :style="{ width: canvasW + 'px', height: canvasH + 'px' }" | |||
| canvas-id="myCanvas" | |||
| id="myCanvas" | |||
| :width="canvasW" | |||
| :height="canvasH" | |||
| class="hidden-canvas"> | |||
| </canvas> | |||
| <view class="add-btn"> | |||
| <view class="btn" @click="handleSaveImage"> | |||
| 长按图片保存到手机 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import Vue from 'vue' | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| name: 'Placard', | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| // 获取用户ID | |||
| userId() { | |||
| return this.userInfo?.id || '' | |||
| }, | |||
| // 动态生成二维码内容 | |||
| qrCodeContent() { | |||
| if (this.userId) { | |||
| return Vue.prototype.$config.redirect + `?vid=${this.userId}` | |||
| } | |||
| return Vue.prototype.$config.redirect | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| qrCodeValue: '', // 初始为空，等用户信息加载后再设置 | |||
| qrCodeSize: 180, | |||
| qrCodeDarkColor: '#000', | |||
| qrCodeLightColor: '#fff', | |||
| margin: 0, | |||
| //画布信息 | |||
| canvasW: 299, | |||
| canvasH: 403, | |||
| //设备信息 | |||
| systemInfo: {}, | |||
| //图片路径 | |||
| tempFilePath: '', | |||
| _rpx: 1, // H5环境使用固定比例 | |||
| _center: 0, | |||
| // 二维码是否生成完成 | |||
| qrCodeReady: false, | |||
| // 重试次数 | |||
| retryCount: 0, | |||
| maxRetry: 1, | |||
| // 用户信息是否已加载 | |||
| userInfoLoaded: false | |||
| } | |||
| }, | |||
| watch: { | |||
| // 监听用户信息变化 | |||
| userInfo: { | |||
| handler(newVal) { | |||
| if (newVal && newVal.id) { | |||
| this.userInfoLoaded = true | |||
| this.qrCodeValue = this.qrCodeContent | |||
| // 如果二维码还未生成，现在生成 | |||
| if (!this.qrCodeReady) { | |||
| this.$nextTick(() => { | |||
| this.generateQRCode() | |||
| }) | |||
| } | |||
| } | |||
| }, | |||
| deep: true, | |||
| immediate: true | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.initCanvas() | |||
| }, | |||
| onShow() { | |||
| // 页面显示时确保获取用户信息 | |||
| this.getUserInfo() | |||
| }, | |||
| methods: { | |||
| // 初始化画布 | |||
| initCanvas() { | |||
| // H5环境使用固定尺寸，便于显示 | |||
| this.canvasW = 299 | |||
| this.canvasH = 403 | |||
| this.qrCodeSize = 180 | |||
| this._center = this.canvasW / 2 | |||
| // 检查用户信息是否已加载 | |||
| if (this.userInfoLoaded && this.qrCodeValue) { | |||
| this.generateQRCode() | |||
| } else { | |||
| // 获取用户信息 | |||
| this.getUserInfo() | |||
| } | |||
| }, | |||
| // 获取用户信息 | |||
| getUserInfo() { | |||
| // 如果store中没有用户信息，尝试获取 | |||
| if (!this.userInfo?.id) { | |||
| this.$store.commit('getUserInfo') | |||
| } | |||
| }, | |||
| // 生成二维码 | |||
| generateQRCode() { | |||
| // 确保有用户ID才生成二维码 | |||
| if (!this.userId) { | |||
| console.log('等待用户信息加载...') | |||
| return | |||
| } | |||
| // 确保二维码内容已设置 | |||
| if (!this.qrCodeValue) { | |||
| this.qrCodeValue = this.qrCodeContent | |||
| } | |||
| console.log('生成二维码，内容：', this.qrCodeValue) | |||
| this.$nextTick(() => { | |||
| if (this.$refs.qrCodeComponent) { | |||
| this.$refs.qrCodeComponent.make() | |||
| } | |||
| }) | |||
| }, | |||
| // 二维码生成完成回调 | |||
| onQRCodeComplete(res) { | |||
| if (res.success) { | |||
| this.qrCodeReady = true | |||
| this.draw() | |||
| } | |||
| }, | |||
| // 绘制海报 | |||
| async draw() { | |||
| if (!this.qrCodeReady) { | |||
| console.log('二维码未准备好') | |||
| return | |||
| } | |||
| const ctx = uni.createCanvasContext('myCanvas', this) | |||
| // 设置背景色 | |||
| ctx.setFillStyle('#ffffff') | |||
| ctx.fillRect(0, 0, this.canvasW, this.canvasH) | |||
| // 绘制标题 | |||
| ctx.setFillStyle('#333333') | |||
| ctx.setFontSize(18) | |||
| ctx.setTextAlign('center') | |||
| ctx.fillText('邀请好友一起享受优质服务', this.canvasW / 2, 30) | |||
| // 绘制用户头像(如果有) | |||
| if (this.userInfo.headImage) { | |||
| try { | |||
| // 先下载图片到本地 | |||
| const avatarPath = await this.downloadImage(this.userInfo.headImage) | |||
| const avatarSize = 60 | |||
| const avatarX = (this.canvasW - avatarSize) / 2 | |||
| const avatarY = 50 | |||
| // 绘制圆形头像背景 | |||
| ctx.setFillStyle('#f0f0f0') | |||
| ctx.beginPath() | |||
| ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, 2 * Math.PI) | |||
| ctx.fill() | |||
| // 绘制圆形头像 | |||
| ctx.save() | |||
| ctx.beginPath() | |||
| ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, 2 * Math.PI) | |||
| ctx.clip() | |||
| ctx.drawImage(avatarPath, avatarX, avatarY, avatarSize, avatarSize) | |||
| ctx.restore() | |||
| } catch (e) { | |||
| console.log('头像绘制失败', e) | |||
| // 绘制默认头像圆圈 | |||
| const avatarSize = 60 | |||
| const avatarX = (this.canvasW - avatarSize) / 2 | |||
| const avatarY = 50 | |||
| ctx.setFillStyle('#e0e0e0') | |||
| ctx.beginPath() | |||
| ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, 2 * Math.PI) | |||
| ctx.fill() | |||
| } | |||
| } else { | |||
| // 没有头像时绘制默认头像圆圈 | |||
| const avatarSize = 60 | |||
| const avatarX = (this.canvasW - avatarSize) / 2 | |||
| const avatarY = 50 | |||
| ctx.setFillStyle('#e0e0e0') | |||
| ctx.beginPath() | |||
| ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, 2 * Math.PI) | |||
| ctx.fill() | |||
| } | |||
| // 绘制用户昵称 | |||
| if (this.userInfo.nickName) { | |||
| ctx.setFillStyle('#333333') | |||
| ctx.setFontSize(16) | |||
| ctx.setTextAlign('center') | |||
| ctx.fillText(this.userInfo.nickName || '用户', this.canvasW / 2, 140) | |||
| } | |||
| // 获取二维码图片并绘制 | |||
| try { | |||
| const qrCodeImagePath = await this.getQRCodeImage() | |||
| if (qrCodeImagePath) { | |||
| const qrSize = 120 | |||
| const qrX = (this.canvasW - qrSize) / 2 | |||
| const qrY = 160 | |||
| ctx.drawImage(qrCodeImagePath, qrX, qrY, qrSize, qrSize) | |||
| } | |||
| } catch (e) { | |||
| console.log('二维码绘制失败', e) | |||
| } | |||
| // 绘制底部文案 | |||
| ctx.setFillStyle('#666666') | |||
| ctx.setFontSize(14) | |||
| ctx.setTextAlign('center') | |||
| ctx.fillText('扫码关注，享受专业服务', this.canvasW / 2, 310) | |||
| // 执行绘制 | |||
| ctx.draw(false, () => { | |||
| // 导出图片 | |||
| setTimeout(() => { | |||
| this.canvasToTempFilePath() | |||
| }, 1000) | |||
| }) | |||
| }, | |||
| // 下载网络图片到本地 | |||
| downloadImage(url) { | |||
| return new Promise((resolve, reject) => { | |||
| // H5环境下直接使用网络图片URL，避免跨域问题 | |||
| // #ifdef H5 | |||
| resolve(url) | |||
| // #endif | |||
| // #ifndef H5 | |||
| uni.downloadFile({ | |||
| url: url, | |||
| success: (res) => { | |||
| if (res.statusCode === 200) { | |||
| resolve(res.tempFilePath) | |||
| } else { | |||
| reject('下载失败') | |||
| } | |||
| }, | |||
| fail: reject | |||
| }) | |||
| // #endif | |||
| }) | |||
| }, | |||
| // 获取二维码图片 | |||
| getQRCodeImage() { | |||
| return new Promise((resolve, reject) => { | |||
| if (this.$refs.qrCodeComponent) { | |||
| this.$refs.qrCodeComponent.toTempFilePath({ | |||
| success: (res) => { | |||
| resolve(res.tempFilePath) | |||
| }, | |||
| fail: (err) => { | |||
| reject(err) | |||
| } | |||
| }) | |||
| } else { | |||
| reject('二维码组件不存在') | |||
| } | |||
| }) | |||
| }, | |||
| // 画布导出为图片 | |||
| canvasToTempFilePath() { | |||
| // #ifdef H5 | |||
| // H5环境下直接转换canvas | |||
| setTimeout(() => { | |||
| this.convertCanvasToBase64() | |||
| }, 500) | |||
| // #endif | |||
| // #ifndef H5 | |||
| uni.canvasToTempFilePath({ | |||
| canvasId: 'myCanvas', | |||
| success: (res) => { | |||
| this.tempFilePath = res.tempFilePath | |||
| console.log('海报生成成功', res.tempFilePath) | |||
| }, | |||
| fail: (err) => { | |||
| console.log('海报生成失败', err) | |||
| uni.showToast({ | |||
| title: '海报生成失败', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| }, this) | |||
| // #endif | |||
| }, | |||
| // 将canvas转换为base64图片 | |||
| convertCanvasToBase64() { | |||
| // #ifdef H5 | |||
| try { | |||
| // 获取canvas元素 | |||
| const canvasElement = document.querySelector('#myCanvas') | |||
| if (!canvasElement) { | |||
| console.error('找不到canvas元素') | |||
| this.retryConvert() | |||
| return | |||
| } | |||
| // 检查是否是canvas元素 | |||
| if (canvasElement.tagName.toLowerCase() !== 'canvas') { | |||
| console.error('元素不是canvas') | |||
| this.retryConvert() | |||
| return | |||
| } | |||
| // 等待canvas绘制完成 | |||
| setTimeout(() => { | |||
| try { | |||
| // 转换为base64 | |||
| const dataURL = canvasElement.toDataURL('image/png', 1.0) | |||
| if (dataURL && dataURL.startsWith('data:image')) { | |||
| this.tempFilePath = dataURL | |||
| console.log('海报生成成功') | |||
| this.retryCount = 0 // 重置重试次数 | |||
| } else { | |||
| throw new Error('生成的图片数据无效') | |||
| } | |||
| } catch (e) { | |||
| console.error('转换图片失败', e) | |||
| this.retryConvert() | |||
| } | |||
| }, 200) | |||
| } catch (e) { | |||
| console.error('转换图片失败', e) | |||
| this.retryConvert() | |||
| } | |||
| // #endif | |||
| }, | |||
| // 重试转换 | |||
| retryConvert() { | |||
| if (this.retryCount < this.maxRetry) { | |||
| this.retryCount++ | |||
| console.log(`重试转换图片，第${this.retryCount}次`) | |||
| setTimeout(() => { | |||
| this.convertCanvasToBase64() | |||
| }, 500) | |||
| } else { | |||
| console.log('重试次数已达上限，使用备用方法') | |||
| this.fallbackCanvasConvert() | |||
| } | |||
| }, | |||
| // 备用的canvas转换方法 | |||
| fallbackCanvasConvert() { | |||
| uni.canvasToTempFilePath({ | |||
| canvasId: 'myCanvas', | |||
| success: (res) => { | |||
| this.tempFilePath = res.tempFilePath | |||
| console.log('海报生成成功（备用方法）', res.tempFilePath) | |||
| }, | |||
| fail: (err) => { | |||
| console.log('海报生成失败', err) | |||
| uni.showToast({ | |||
| title: '海报生成失败', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| }, this) | |||
| }, | |||
| // 保存图片 - H5环境提示用户长按 | |||
| handleSaveImage() { | |||
| if (!this.tempFilePath) { | |||
| uni.showToast({ | |||
| title: '图片还未生成完成', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| // H5环境下提示用户长按保存 | |||
| uni.showModal({ | |||
| title: '保存图片', | |||
| content: '请长按上方图片，选择"保存图片"即可保存到手机', | |||
| showCancel: false, | |||
| confirmText: '知道了' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .placard { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| min-height: 100vh; | |||
| background-color: #f5f5f5; | |||
| padding: 20px; | |||
| .placard-content { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .img-box { | |||
| background-color: #fff; | |||
| border-radius: 10px; | |||
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |||
| overflow: hidden; | |||
| margin-bottom: 20px; | |||
| img { | |||
| user-select: none; | |||
| -webkit-user-select: none; | |||
| -webkit-touch-callout: default; | |||
| } | |||
| } | |||
| .loading-box { | |||
| background-color: #fff; | |||
| border-radius: 10px; | |||
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |||
| margin-bottom: 20px; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| .loading-content { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .loading-spinner { | |||
| width: 30px; | |||
| height: 30px; | |||
| border: 3px solid #f3f3f3; | |||
| border-top: 3px solid #84A73F; | |||
| border-radius: 50%; | |||
| animation: spin 1s linear infinite; | |||
| margin-bottom: 10px; | |||
| } | |||
| .loading-text { | |||
| color: #666; | |||
| font-size: 14px; | |||
| } | |||
| } | |||
| } | |||
| .add-btn { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 100%; | |||
| .btn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 80%; | |||
| height: 40px; | |||
| border-radius: 20px; | |||
| color: white; | |||
| font-size: 16px; | |||
| background: linear-gradient(to right, #84A73F, #D8FF8F); | |||
| margin-top: 20px; | |||
| box-shadow: 0 4px 12px rgba(132, 167, 63, 0.3); | |||
| cursor: pointer; | |||
| &:active { | |||
| transform: scale(0.98); | |||
| transition: transform 0.1s; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .hidden-canvas { | |||
| opacity: 0; | |||
| position: fixed; | |||
| top: -9999px; | |||
| left: -9999px; | |||
| pointer-events: none; | |||
| } | |||
| .qrcode { | |||
| position: fixed; | |||
| top: -9999px; | |||
| left: -9999px; | |||
| opacity: 0; | |||
| pointer-events: none; | |||
| } | |||
| @keyframes spin { | |||
| 0% { transform: rotate(0deg); } | |||
| 100% { transform: rotate(360deg); } | |||
| } | |||
| </style> | |||