Task：收礼相关接口

pkg_user/views/gift/components/AddressDialog.vue

@@ -0,0 +1,287 @@
+<template>
+  <u-popup :show="show" mode="center" round="16">
+    <view class="dialog-container">
+      <view class="dialog-title">填写收货地址</view>
+      
+      <u-form :model="form" ref="uForm" labelPosition="left">
+        <u-form-item label="姓名" prop="name" borderBottom>
+          <u-input v-model="form.name" placeholder="请输入姓名" border="none"/>
+        </u-form-item>
+        
+        <u-form-item label="联系电话" prop="phone" borderBottom>
+          <u-input v-model="form.phone" placeholder="请输入联系电话" border="none"/>
+        </u-form-item>
+        
+        <u-form-item label="所在地区" prop="region" borderBottom>
+          <CitySelect
+            ref="cityselect"
+            :defaultValue="addressText"
+            @callback="result"
+            :items="district"
+          ></CitySelect>
+        </u-form-item>
+        
+        <u-form-item label="详细地址" prop="address" borderBottom>
+          <u-input v-model="form.address" placeholder="请输入详细地址" border="none" />
+        </u-form-item>
+      </u-form>
+
+      <view class="dialog-footer">
+        <u-button type="primary" color="#C52733" shape="circle" @click="handleSave">立即保存</u-button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+import CitySelect from '@/components/CitySelect'
+import { getAddress, getCity, postAddress, analysisAddress } from '@/api/user'
+import { isWeixin } from '@/utils'
+export default {
+  components: {
+    CitySelect
+  },
+  data() {
+    return {
+      district: [],
+      id: 0,
+      // 是否选择地址模式：0-不是，1-来源订单创建页面，2-来源购物车
+      choosMode: 0,
+      userAddress: {
+        realName: '',
+        phone: '',
+        detail: '',
+        isDefault: 0
+      },
+      address: {},
+      isWechat: isWeixin(),
+      addressText: "",
+      pageKeyId: Object.freeze('userAddressEdit'),
+      addressInput: '',
+      show: false,
+      showRegionPicker: false,
+      form: {
+        name: '',
+        phone: '',
+        region: '',
+        address: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择所在地区', trigger: 'change' }
+        ],
+        address: [
+          { required: true, message: '请输入详细地址', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.show = true
+      this.getUserAddress()
+      this.getCityList()
+    },
+    result() {
+
+    },
+    handleRegionConfirm(e) {
+      this.form.region = e.province.label + ' ' + e.city.label + ' ' + e.area.label
+    },
+    handleSave() {
+      this.$refs.uForm.validate(valid => {
+        if (valid) {
+          // 这里处理保存逻辑
+          this.$emit('save', this.form)
+          this.show = false
+        }
+      })
+    },
+    //获取当前定位地址
+    getCurAddress() {
+      var that = this;
+      //定位
+      uni.showLoading({
+        title: '定位中...'
+      });
+      //this.getLocation();
+      uni.getLocation({
+      type: 'wgs84',
+      success: function (res) {
+        let latitude = res.latitude;
+        let longitude = res.longitude;
+
+        console.log('latitude:' + latitude + 'longitude:' + longitude)
+
+        // #ifdef H5
+        Vue.jsonp(
+            'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + config.key,
+            {
+              //callbackName: 'QQmap',
+              output: 'jsonp',
+            }).then(json => {
+          // Success.
+          uni.hideLoading();
+
+          that.addressText =
+              json.result.ad_info.province + " " + json.result.ad_info.city + " " + json.result.ad_info.district;
+          that.address.province = json.result.ad_info.province;
+          that.address.city = json.result.ad_info.city;
+          that.address.district = json.result.ad_info.district;
+          that.$set(that.userAddress, 'detail', json.result.formatted_addresses.recommend);
+          //that.userAddress.detail = json.result.formatted_addresses.recommend;
+          // that.$refs.cityselect.adjustDefaultValue();
+
+          //设置city_id
+          var pIdx = that.getIndex(that.address.province, that.district);
+          if (pIdx > -1) {
+            var citys = that.district[pIdx].c;
+            var cIdx = that.getIndex(that.address.city, citys);
+            if (cIdx > -1) {
+              var city = citys[cIdx];
+              that.address.city_id = city.v;
+              console.log('city_id:' + city.v);
+            }
+          }
+
+
+        }).catch(err => {
+          // Failed.
+          console.log('地址解析失败:' + JSON.stringify(err));
+          uni.hideLoading();
+        })
+        // #endif
+
+        // #ifndef H5
+        uni.request({
+          url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + config.key,
+          success: function (res) {
+            // console.log('res:'+JSON.stringify(res.data));
+            uni.hideLoading();
+            that.addressText =
+                res.data.result.ad_info.province + " " + res.data.result.ad_info.city + " " + res.data.result.ad_info.district;
+            that.address.province = res.data.result.ad_info.province;
+            that.address.city = res.data.result.ad_info.city;
+            that.address.district = res.data.result.ad_info.district;
+            //that.userAddress.detail = res.data.result.formatted_addresses.recommend;
+            that.$set(that.userAddress, 'detail', res.data.result.formatted_addresses.recommend);
+            // that.$refs.cityselect.adjustDefaultValue();
+            //设置city_id
+            var pIdx = that.getIndex(that.address.province, that.district);
+            if (pIdx > -1) {
+              var citys = that.district[pIdx].c;
+              var cIdx = that.getIndex(that.address.city, citys);
+              if (cIdx > -1) {
+                var city = citys[cIdx];
+                that.address.city_id = city.v;
+                console.log('city_id:' + city.v);
+              }
+            }
+
+
+          },
+          fail: function (res) {
+            console.log('地址解析失败');
+            uni.hideLoading();
+          },
+          complete: function () {
+
+          }
+        });
+        // #endif
+      },
+      fail: function (res) {
+        uni.hideLoading();
+
+        // uni.showToast({
+        // 	title:'城市定位失败:'+JSON.stringify(res),
+        // 			icon:'none',
+        // 			duration:2000
+        // })
+      }
+    });
+
+    },
+    getCityList: function () {
+      let that = this;
+      getCity()
+      .then(res => {
+        that.district = res.data;
+        that.ready = true;
+
+        if (this.id) {
+          //设置city_id
+          var pIdx = that.getIndex(that.address.province, that.district);
+          if (pIdx > -1) {
+            var citys = that.district[pIdx].c;
+            var cIdx = that.getIndex(that.address.city, citys);
+            if (cIdx > -1) {
+              var city = citys[cIdx];
+              that.address.city_id = city.v;
+              console.log('city_id:' + city.v);
+            }
+          }
+        }
+
+      })
+      .catch(err => {
+        that.$dialog.error(err.msg);
+      });
+    },
+    getUserAddress: function () {
+      if (!this.id) return false;
+      let that = this;
+      getAddress(that.id).then(res => {
+        that.userAddress = res.data;
+        that.addressText = res.data.province + " " + res.data.city + " " + res.data.district;
+        that.address.province = res.data.province;
+        that.address.city = res.data.city;
+        that.address.district = res.data.district;
+
+        if (that.district.length > 0) {
+          //设置city_id
+          var pIdx = that.getIndex(that.address.province, that.district);
+          if (pIdx > -1) {
+            var citys = that.district[pIdx].c;
+            var cIdx = that.getIndex(that.address.city, citys);
+            if (cIdx > -1) {
+              var city = citys[cIdx];
+              that.address.city_id = city.v;
+              console.log('city_id:' + city.v);
+            }
+          }
+        }
+      });
+    },
+    getAddress() {
+    },
+  }
+}
+</script>
+
+<style scoped>
+.dialog-container {
+  width: 600rpx;
+  padding: 40rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+}
+
+.dialog-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+
+.dialog-footer {
+  margin-top: 40rpx;
+}
+</style>

pkg_user/views/gift/components/GiftCard.vue

@@ -1,35 +1,127 @@
 <template>
   <view class="mask">
-    <view class="gift-card-modal" :style="{backgroundColor: '#C52733'}">
+    <view class="gift-card-modal" >
+      <image class="bg-image" :src="card.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+      <view class="image-wrap">
+        <image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
+          
+        </image>
+      </view>
+      <view class="wrap-box">
+        
+      </view>
+      <view class="auto-text-color">
+        {{ card.message || '礼笺轻启，礼藏心意' }}
+      </view>
       <!-- 弹窗内容 -->
-      <view class="address-btn v12-white v12-primary-text">
+      <view class="address-btn v12-white v12-primary-text" @click="setAddress">
         填写地址并收下
       </view>
-      <view class="share-btn v12-white v12-primary-text">
+      <view class="share-btn v12-white v12-primary-text" v-if="card.canTransfer !== 0">
         点击转增给好友
       </view>
+      <view class="tips">
+        <view class="tip-text v12-mr-1">
+          未领取礼包，将于24小时后自动
+        </view>
+        <u-icon @click="showTips" name="error-circle" color="#fff" size="28rpx"></u-icon>
+      </view>
     </view>
+    <giftTips ref="giftTips" :richText="giftNotice"></giftTips>
+    <AddressDialog ref="addressDialog" ></AddressDialog>
   </view>
 </template>
 
 <script>
+import { getGiftCardSendNotice } from '@/api/gift'
+import giftTips from './giftTips.vue'
+import AddressDialog from './AddressDialog.vue'
 export default {
   name: 'GiftCard',
+  components: {
+    giftTips,
+    AddressDialog
+  },
+  props: {
+    // 组件属性
+    card: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data() {
     return {
       // 组件数据
+      giftNotice: ''
     }
+  },
+  methods: {
+    setAddress() {
+      this.$refs.addressDialog.open()
+    },
+    async showTips() {
+      // 获取发礼提示
+      getGiftCardSendNotice().then(res => {
+        this.$refs.giftTips.showTips = true
+        this.giftNotice = res.data
+      })
+      
+    },
   }
 }
 </script>
 
 <style scoped>
+.bg-image{
+  width: 586rpx;
+  height: 704rpx;
+  position: absolute;
+  top: 0;
+}
+.tips{
+  display: flex;
+  align-items: center;
+  margin-top: 40rpx;
+  position: absolute;
+  bottom: 50rpx;
+}
+.tip-text{
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #fff;
+  opacity: 0.6;
+  line-height: 36rpx;
+}
+.wrap-box{
+  width: 296rpx;
+  height: 296rpx;
+}
+.image-wrap{
+  width: 296rpx;
+  height: 296rpx;
+  border: 10rpx solid #FDF0D3;
+  border-radius: 30rpx;
+  position: absolute;
+  top: -60px;
+}
+.pro-image{
+  width: 296rpx;
+  height: 296rpx;
+  border-radius: 30rpx;
+}
+.auto-text-color {
+  color: #fff;
+  font-size: 24rpx;
+  opacity: 0.9;
+}
 .share-btn{
   width: fit-content;
   padding: 15rpx 30rpx;
   border-radius: 100rpx;
   font-size: 24rpx;
-  margin-top: 30rpx;
+  margin-top: 40rpx;
+  z-index: 999;
 }
 .address-btn{
   width: fit-content;
@@ -37,7 +129,8 @@ export default {
   border-radius: 100rpx;
   font-size: 32rpx;
   font-weight: bold;
-  margin-top: 30rpx;
+  margin-top: 40rpx;
+  z-index: 999;
 }
 .gift-card-modal {
     position: absolute;

pkg_user/views/gift/gift.vue

@@ -80,7 +80,7 @@
         <u-switch v-model="canTransfe" ></u-switch>
       </view>
     </view>
-    <button v-if="isPayOk" open-type="share" class="share-btn" @click="shareToFriend">
+    <button v-if="isPayOk" open-type="share" class="share-btn" >
       <view class="v12-font-28 v12-primary-text v12-align-center">
         <u-icon :name="webUrl + '/icon/gift-primary.png'" size="18"></u-icon>
         点击送给朋友</view>
@@ -157,15 +157,22 @@ export default {
       payPassword: '',
       payType: '',
       isPayOk: false,
+      giftKey: '',
     }
   },
   onLoad(opts) {
-    console.log(opts, 'gift');
     this.cartId = opts.cartId
     this.couponId = opts.couponId
     this.getGift()
   },
   computed: mapGetters(["userInfo"]),
+  onShareAppMessage() {
+    return {
+      title: '送朋友',
+      path: `/pkg_user/views/gift/receive?code=${this.giftKey}`,
+      imageUrl: this.goodsInfo.productInfo.image
+    }
+  },
   methods: {
     pwdPopFinish(payPwd) {
       this.payPassword = payPwd;
@@ -176,7 +183,6 @@ export default {
       this.confirmGift(false)
     },
     onCoverConfirm(cover) {
-      console.log(cover);
       this.cover = cover.name
       this.templateId = cover.id
       this.selectedCover = cover.image
@@ -223,7 +229,9 @@ export default {
       });
       const params = {
         orderKey: this.orderKey,
+        from: 'routine',
         cartId: this.cartId,
+        couponId: this.couponId,
         templateId: this.templateId,
         message : this.message,
         cover: this.selectedCover,
@@ -267,6 +275,7 @@ export default {
               duration: 2000
             });
             this.isPayOk = true;
+            this.giftKey = data.giftCard.code;
             break;
           case "WECHAT_H5_PAY":
             // H5支付
@@ -305,23 +314,6 @@ export default {
             this.$refs.payPwdPop.clear();//清空支付密码
             this.$refs.payPwdPop.close();//关闭支付密码弹窗
           });
-    },
-    shareToFriend() {
-      uni.share({
-        provider: 'weixin',
-        scene: 'WXSceneSession', // 分享到好友
-        type: 0, // 0:文字 1:图片 2:音乐 3:视频 4:小程序
-        title: '送你一份礼物', // 分享标题
-        summary: '我精心挑选了一份礼物送给你，快来领取吧！', // 分享描述
-        href: 'https://your-domain.com/gift', // 分享链接
-        imageUrl: this.goodsInfo.productInfo.image, // 分享图片
-        success: (res) => {
-          console.log('分享成功', res);
-        },
-        fail: (err) => {
-          console.log('分享失败', err);
-        }
-      });
     }
   }
 }

pkg_user/views/gift/receive.vue

@@ -1,14 +1,32 @@
 <template>
   <view>
-    <GiftCard/>
+    <GiftCard :card="giftCard"/>
   </view>
 </template>
 
 <script>
 import GiftCard from './components/GiftCard.vue'
+import { getGiftCardDetail } from '@/api/gift'
 export default {
   components: {
     GiftCard 
+  },
+  data() {
+    return {
+      giftCard: {}
+    }
+  },
+  onLoad(opts) {
+    this.getGiftCard(opts.code)
+  },
+  methods: {
+    async getGiftCard(code) {
+      const res = await getGiftCardDetail({
+        code: code
+      })
+      this.giftCard = res.data
+    },
+    
   }
 }
 </script>