Merge branch 'feat/vipLife' into pay

src/api/tips.js

 export default {
-  101: `<p>充值类商品售出<strong>后无法进行退换</strong>，非充值用户请谨慎购买。</p>`,
-  102: `<p>充值类商品售出<strong>后无法进行退换</strong>，非充值用户请谨慎购买。</p>`
+  1: {
+    title: '温馨提示',
+    content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
+  },
+  2: {
+    title: '温馨提示',
+    content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
+  },
+  401: {
+    title: '使用方法',
+    content: `<p>1. 进入猫眼APP，登陆后打开“我的”，点击“优惠券”；</p>
+    <p>2. 进入“优惠券”，在页面上方白框中输入13位优惠券密码，点击“添加”即可；</p>
+    <p>3. 返回，选定场次并完成选座；</p>
+    <p>4. 核对购票信息、结算金额，点击“确认支付”完成选座购票；</p>
+    <p>5. 用户到影城“取票机”取票即可使用。</p>`
+  },
+  301: {
+    title: '使用方法',
+    content: `<p>1. 进入饿了么APP-选择我的-点击会员，使用兑换码兑换会员，输入兑换码即可兑换；</p>
+    <p>2. 饿了么月度会员含4个5元的红包总计20元，全品类通用(早餐及帮买帮送等特殊订单除外)，红包仅限购买会员时选择的城市使用；</p>
+    <p>3. 每完成1笔在线订单(实际支付金额大于等于20元)，即可获得1个奖励金，奖励金可累计并兑换各种无门槛红包及高额商家红包。</p>`
+  }
 };

src/style/index.less

@@ -109,4 +109,10 @@ strong {
   .text-14();
   margin-bottom: @padding-xs;
   }
+}
+.cr-dialog--header {
+  padding: @padding-xl;
+  &--isolated {
+    padding-bottom: 0;
+  }
 }
\ No newline at end of file

src/style/theme.less

@@ -31,15 +31,13 @@
 @cell-clear-color: @gray-4;
 @field-label-width: 75px;
 
-@dialog-width: 290px;
-@dialog-font-size: 14px;
 @dialog-border-radius: @border-radius-lg;
-@dialog-message-font-size: 16px;
-@dialog-has-title-message-text-color: @text-color;
-@dialog-confirm-button-text-color: @red;
+@dialog-has-title-message-text-color: @text-grey;
 
 @navbar-default-height: @nav-bar-height;
 @picker-toolbar-padding: @padding-unit - 2 @padding-md;
 @picker-font-size: 14px;
 
-@tabs-nav-background-color: @background-color;
+@tabs-nav-background-color: @background-color;
\ No newline at end of file
+
+@loading-text-color: @white;
\ No newline at end of file

src/views/home/components/RechargeInput.vue

@@ -15,7 +15,7 @@
     />
     <div class="center-phone__list" :class="{ show: inputBlur }">
       <div
-        v-for="(item, index) in list"
+        v-for="(item, index) in historyPhoneNoList"
         :key="index"
         class="center-phone__list-item"
         @click="selectPhone(item)"
@@ -32,8 +32,10 @@ import { phoneFormat, phoneTrim, checkPhoneFormat } from '@/service/utils.servic
 const { getPhoneHome } = api;
 export default {
   props: {
-    userPhoneInfo: Object,
-    list: Array
+    userPhoneInfo: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
@@ -46,6 +48,9 @@ export default {
     isDefaultphone: function() {
       return this.phoneNo === this.userPhoneInfo?.phoneNo;
     },
+    historyPhoneNoList() {
+      return this.userPhoneInfo?.historyPhoneNoList || [];
+    },
     phoneNo: function() {
       return phoneTrim(this.rechargeTel);
     }

src/views/orderDetail/index.less

@@ -51,7 +51,12 @@
     }
   }
   &__info {
+    &-right {
+      margin-left: auto;
+      color: @red !important;
+    }
     &-item {
+      display: flex;
       padding: 8px 0;
       color: @text-grey;
       .text-13();

src/views/orderDetail/index.vue

@@ -46,6 +46,7 @@
     <div class="Od__item Od__info">
       <div class="Od__info-item">
         订单编号：<span>{{ orderInfo.orderDetail.orderNo || '' }}</span>
+        <span class="Od__info-right" @click="copyPwd(orderNo)">复制</span>
       </div>
       <div class="Od__info-item">
         下单时间：<span>{{ orderInfo.orderDetail.orderTime || '' }}</span>
@@ -78,7 +79,7 @@
         v-if="orderInfo.orderStatusInfo.orderStatus === 11"
         size="small"
         plain
-        type="primary"
+        type="default"
         shape="circle"
         @click="openCancelPopup"
       >
@@ -98,7 +99,7 @@
         v-if="orderInfo.orderStatusInfo.orderStatus === 21"
         size="small"
         plain
-        type="primary"
+        type="default"
         shape="circle"
         @click="orderNotify"
       >
@@ -115,12 +116,10 @@
         再次购买
       </cr-button>
     </div>
-    <cancel-popup v-model="showCancelPopup" :order-info="currentOrder" />
   </div>
 </template>
 <script>
 import ListItem from '../orderList/components/ListItem.vue';
-import CancelPopup from '../orderList/components/CancelPopup.vue';
 import { setClipboardData } from '@/service/utils.service';
 import orderApi from '@/api/order.api';
 import img11 from '@/assets/images/order/11.png';
@@ -138,11 +137,11 @@ const orderStatusImgs = {
 export default {
   name: 'OrderDetail',
   components: {
-    ListItem,
-    CancelPopup
+    ListItem
   },
   data() {
     return {
+      orderNo: '',
       orderInfo: {
         feeInfo: {},
         orderDetail: {},
@@ -151,8 +150,7 @@ export default {
         skuList: [],
         payDetail: {},
         orderNo: ''
-      },
-      showCancelPopup: false
+      }
     };
   },
   computed: {
@@ -166,6 +164,9 @@ export default {
     },
     payType() {
       return this.orderInfo.orderDetail.payType === 1 ? '微信' : '支付宝';
+    },
+    isKeyChange() {
+      return this.currentOrder.virtualChargeAttrs && this.currentOrder.virtualChargeAttrs.cardKey;
     }
   },
   mounted() {
@@ -182,26 +183,46 @@ export default {
         'https://www.sobot.com/chat/h5/v2/index.html?sysnum=84ed0ad93caa47b0a9d1600824546b35&source=2';
     },
     openCancelPopup() {
-      this.showCancelPopup = true;
+      this.$dialog({
+        title: '取消订单',
+        message: '您真的要取消吗？',
+        confirmButtonText: '仍要取消',
+        cancelButtonText: '留下商品',
+        onConfirm: () => {
+          this.handleRadioSubmit();
+        }
+      });
+    },
+    async handleRadioSubmit() {
+      const [res] = await orderApi.orderCancel({
+        orderNo: this.currentOrder.orderNo,
+        cancelReason: '不想买了',
+        cancelReasonType: 4
+      });
+      if (res) {
+        this.$toast('已取消');
+        this.$set(this.orderInfo.orderStatusInfo, `orderStatus`, 51);
+        this.$set(this.orderInfo.orderStatusInfo, `orderStatusText`, '交易关闭');
+      }
     },
     toPay() {
-      console.log(this.currentOrder.orderNo);
       this.$router.push({ path: '/pay', query: { orderNo: this.orderNo } });
     },
     toGoods() {
-      this.$router.push({ path: '/goods' });
+      this.$router.push({
+        path: this.isKeyChange ? '/vipLife' : '/home'
+      });
     },
     orderNotify() {
       this.$toast.success('已通知卖家');
     },
     copyPwd(item) {
       setClipboardData({
-        data: `${item.cardPassword}`,
+        data: '' + item,
         success: () => {
           this.$toast.success('已复制');
         }
       });
-      console.log(item);
     }
   }
 };

src/views/orderList/components/CancelPopup.vue

@@ -72,7 +72,7 @@ export default {
   },
   computed: {
     reason() {
-      return this.reasonList.find(item => item.cancelReasonType === this.reasonList);
+      return this.reasonList.find(item => item.cancelReasonType === this.reasonType);
     }
   },
   watch: {

src/views/orderList/components/List.vue

@@ -18,7 +18,7 @@
         <div class="Ol__foot">
           <div class="Ol__foot-settle">
             <span>总价¥{{ item.totalFee }}，</span>
-            <span>优惠¥{{ item.reduceFee }}，</span>
+            <span v-if="item.reduceFee">优惠¥{{ item.reduceFee }}，</span>
             <span>
               实付款<strong>¥{{ item.originalFee }}</strong>
             </span>
@@ -30,7 +30,7 @@
               plain
               type="default"
               shape="circle"
-              @click="onOptionClick(item, 'cancel')"
+              @click.stop="onOptionClick(item, index, 'cancel')"
             >
               取消订单
             </cr-button>
@@ -40,7 +40,7 @@
               plain
               type="primary"
               shape="circle"
-              @click="onOptionClick(item, 'pay')"
+              @click.stop="onOptionClick(item, index, 'pay')"
             >
               付款
             </cr-button>
@@ -50,7 +50,7 @@
               plain
               type="default"
               shape="circle"
-              @click="onOptionClick(item, 'notify')"
+              @click.stop="onOptionClick(item, index, 'notify')"
             >
               提醒发货
             </cr-button>
@@ -60,7 +60,7 @@
               plain
               type="primary"
               shape="circle"
-              @click="onOptionClick(item, 'again')"
+              @click.stop="onOptionClick(item, index, 'again')"
             >
               再次购买
             </cr-button>
@@ -119,8 +119,8 @@ export default {
     onLoad() {
       this.$emit(EVENT_LOADING);
     },
-    onOptionClick(orderInfo, eventType) {
-      this.$emit(EVENT_CLICK, { orderInfo, eventType });
+    onOptionClick(orderInfo, index, eventType) {
+      this.$emit(EVENT_CLICK, { orderInfo: { ...orderInfo, index }, eventType });
     },
     toHome() {
       this.$router.replace({ path: '/home' });

src/views/orderList/components/ListItem.vue

@@ -12,26 +12,26 @@
         <div v-if="it.count" class="Ol__body-row">
           <span class="Ol__body-count">{{ it.count }}件</span>
         </div>
-        <div v-if="it.virtualChargeAttrs" class="Ol__body-skus">
-          <div v-if="it.virtualChargeAttrs.account" class="Ol__body-sku">
+        <div v-if="it.virtualRechargeAttrs" class="Ol__body-skus">
+          <div v-if="it.virtualRechargeAttrs.account" class="Ol__body-sku">
             <span>充值帐户：</span>
-            <span class="Ol__body-val">{{ it.virtualChargeAttrs.account }}</span>
+            <span class="Ol__body-val">{{ it.virtualRechargeAttrs.account }}</span>
           </div>
-          <div v-if="it.virtualChargeAttrs.registrationLocation" class="Ol__body-sku">
+          <div v-if="it.virtualRechargeAttrs.registrationLocation" class="Ol__body-sku">
             <span>归属地：</span>
-            <span class="Ol__body-val">{{ it.virtualChargeAttrs.account }}</span>
+            <span class="Ol__body-val">{{ it.virtualRechargeAttrs.registrationLocation }}</span>
           </div>
-          <div v-if="it.virtualChargeAttrs.cardNo" class="Ol__body-sku">
+          <div v-if="it.virtualRechargeAttrs.cardNo" class="Ol__body-sku">
             <span>卡号：</span>
-            <span class="Ol__body-val">{{ it.virtualChargeAttrs.cardNo }}</span>
+            <span class="Ol__body-val">{{ it.virtualRechargeAttrs.cardNo }}</span>
           </div>
-          <div v-if="it.virtualChargeAttrs.cardPassword" class="Ol__body-sku">
+          <div v-if="it.virtualRechargeAttrs.cardPassword" class="Ol__body-sku">
             <span>卡密：</span>
-            <span class="Ol__body-val">{{ it.virtualChargeAttrs.cardPassword }}</span>
+            <span class="Ol__body-val">{{ it.virtualRechargeAttrs.cardPassword }}</span>
             <a
               v-if="props.showCopy"
               href="javascript:;"
-              @click="parent.copyPwd(it.virtualChargeAttrs)"
+              @click="parent.copyPwd(it.virtualRechargeAttrs.cardPassword)"
             >
               复制
             </a>

src/views/orderList/index.vue

@@ -11,14 +11,12 @@
         />
       </cr-tab>
     </cr-tabs>
-    <cancel-popup v-model="showCancelPopup" :order-info="currentOrder" />
   </div>
 </template>
 <script>
 import orderApi from '@/api/order.api';
 import List from './components/List';
 import { isApp } from '@/service/validation.service';
-import CancelPopup from './components/CancelPopup';
 const commonParams = {
   loading: false,
   finished: false,
@@ -29,13 +27,11 @@ const commonParams = {
 export default {
   name: 'OrderList',
   components: {
-    List,
-    CancelPopup
+    List
   },
   data() {
     return {
       isApp,
-      showCancelPopup: false,
       currentTab: 0,
       navList: [
         {
@@ -94,13 +90,11 @@ export default {
           this.toGoods();
           break;
         default:
-          this.currentItems = {};
+          this.currentOrder = {};
           break;
       }
     },
-    orderCancelPopup() {
-      this.showCancelPopup = true;
-    },
+
     toPay() {
       this.$router.push({ path: '/pay', query: { orderNo: this.currentOrder.orderNo } });
     },
@@ -113,6 +107,33 @@ export default {
     setNavListData(key, val) {
       this.$set(this.navList[this.currentTab], key, val);
     },
+    orderCancelPopup() {
+      this.$dialog({
+        title: '取消订单',
+        message: '您真的要取消吗？',
+        confirmButtonText: '仍要取消',
+        cancelButtonText: '留下商品',
+        onConfirm: () => {
+          this.handleRadioSubmit();
+        }
+      });
+    },
+    async handleRadioSubmit() {
+      const [res] = await orderApi.orderCancel({
+        orderNo: this.currentOrder.orderNo,
+        cancelReason: '不想买了',
+        cancelReasonType: 4
+      });
+      if (res) {
+        this.$toast('已取消');
+        this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, 51);
+        this.$set(
+          this.navList[this.currentTab].list[this.currentOrder.index],
+          `orderStatusText`,
+          '交易关闭'
+        );
+      }
+    },
     async getList() {
       let { finished, page, pageSize, list, state: orderStatus } = this.navList[this.currentTab];
       if (finished) return;

src/views/pay/components/PayCardItem.vue

@@ -44,11 +44,11 @@
 </template>
 <script>
 // import { registeredEvents } from '@/utils/sa';
-const payTypeE = [
-  'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
-  'PD_YXMMAEC_UserClickCashierSelectWechatPay'
-];
-const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
+// const payTypeE = [
+//   'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
+//   'PD_YXMMAEC_UserClickCashierSelectWechatPay'
+// ];
+// const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
 export default {
   name: 'PayCardItem',
   inject: ['payCard', 'pay'],

src/views/vipLife/components/AccountInput.vue

@@ -2,7 +2,13 @@
   <div class="Vl__account">
     <cr-field v-model="accountMask" :placeholder="`请输入${info.name || ''}账号`" clearable>
       <template #button>
-        <cr-image v-if="info.icon" :src="info.icon" width="0.64rem" height="0.64rem" />
+        <cr-image
+          v-if="info.icon"
+          :src="info.icon"
+          fit="contain"
+          width="0.64rem"
+          height="0.64rem"
+        />
       </template>
     </cr-field>
     <!-- <div class="Vl__list" :class="{ show: !inputBlur }">
@@ -46,7 +52,7 @@ export default {
   computed: {
     accountMask: {
       get() {
-        return this.info.rechargeAccountType !== 3 ? this.phoneFormat(this.value) : this.value;
+        return this.info.type !== 101 ? this.phoneFormat(this.value) : this.value;
       },
       set(val) {
         this.$emit('input', val.replace(/\s/g, ''));

src/views/vipLife/components/SkuList.vue

 <template functional>
   <div class="Vl__sku" :class="{ disabled: props.disabled, 'three-col': props.threeCol }">
-    <div
-      v-for="(item, index) in props.list"
-      :key="index"
-      class="Vl__sku-item"
-      :class="{
-        cheap: item.price - item.salePrice > 0,
-        active: props.info.skuNo === item.skuNo,
-        nohhird: (index + 1) % 3 !== 0
-      }"
-      @click="parent.handleSkuSelected(item, index)"
-    >
-      <div class="Vl__sku-name">
-        {{ props.threeCol ? item.salePrice : item.skuName }}{{ showUnit ? '元' : '' }}
+    <template v-if="props.list.length">
+      <div
+        v-for="(item, index) in props.list"
+        :key="index"
+        class="Vl__sku-item"
+        :class="{
+          cheap: item.price - item.salePrice > 0,
+          active: props.info.skuNo === item.skuNo,
+          'no-stock': !item.hasStock,
+          nohhird: (index + 1) % 3 !== 0
+        }"
+        @click="item.hasStock && parent.handleSkuSelected(item, index)"
+      >
+        <div class="Vl__sku-name">
+          {{ props.threeCol ? item.salePrice : item.skuName }}{{ props.showUnit ? '元' : '' }}
+        </div>
+        <div class="Vl__sku-price">售价{{ item.price }}元</div>
       </div>
-      <div class="Vl__sku-price">售价{{ props.threeCol ? item.price : item.salePrice }}元</div>
-      <div class="Vl__sku-tag">优惠</div>
-    </div>
+    </template>
+    <cr-empty v-else class="Vl__sku-empty" image="commodity" description="暂无商品～" />
   </div>
 </template>
 <script>
@@ -49,6 +52,9 @@ export default {
     align-content: flex-start;
     position: relative;
     z-index: 1;
+    &-empty {
+      flex-flow: wrap;
+    }
     &.disabled::before {
       content: ' ';
       z-index: 2;
@@ -85,13 +91,45 @@ export default {
       position: relative;
       margin-bottom: @padding-xs;
       transition: all 0.1s linear;
+      &::before {
+        content: ' ';
+        background: @gray-2;
+        .text-10();
+        border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
+        padding: 0 @padding-unit;
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: none;
+      }
+      // 优惠
       &.cheap {
-        .Vl__sku-tag {
+        &::before {
+          content: '\4f18\60e0';
           display: block;
           color: @white;
           background: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
         }
       }
+      // 补货中
+      &.no-stock {
+        background: @white !important;
+        border-color: @grey-border !important;
+        pointer-events: none;
+        cursor: not-allowed;
+        &::before {
+          content: '\8865\8d27\4e2d';
+          display: block;
+          color: @white;
+          background: linear-gradient(90deg, #cecece 2%, #989898 98%);
+        }
+        .Vl__sku-name {
+          color: @gray-4 !important;
+        }
+        .Vl__sku-price {
+          color: @gray-4 !important;
+        }
+      }
       &.active {
         background: #fff5f5;
         border: 1px solid @red;
@@ -117,16 +155,6 @@ export default {
       color: @gray-5;
       .text-12();
     }
-    &-tag {
-      background: @gray-2;
-      .text-10();
-      border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
-      padding: 0 @padding-unit;
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: none;
-    }
   }
 }
 </style>

src/views/vipLife/components/SpuList.vue

 <template>
   <div ref="spuList" class="Vl__spu-wrapper">
-    <div class="Vl__spu" :style="{ width: numAddUnit(contentWidth) }">
+    <div class="Vl__spu" :style="{ minWidth: numAddUnit(contentWidth) }">
       <div
         v-for="(item, index) in list"
         :key="index"
@@ -8,10 +8,15 @@
         :class="{ 'Vl__spu-item_active': info.spuNos === item.spuNos }"
         @click="handleSpuClick($event, item, index)"
       >
-        <cr-image :src="item.icon" height="1.093333rem" width="1.093333rem" class="Vl__spu-icon" />
+        <cr-image
+          :src="item.icon"
+          height="1.093333rem"
+          width="1.093333rem"
+          fit="contain"
+          class="Vl__spu-icon"
+        />
         <div class="Vl__spu-name">{{ item.name }}</div>
       </div>
-      <div class="Vl__spu-placeholder" :style="{ width: numAddUnit(placeholderWidth) }" />
     </div>
   </div>
 </template>
@@ -42,34 +47,44 @@ export default {
     };
   },
   computed: {
+    contentWidth() {
+      return ITEM_WIDTH * (this.list.length + 2.34);
+    }
+  },
+  watch: {
     contentWidth() {
       this.$nextTick(() => {
-        this.listWrapper && this.listWrapper.refresh();
+        this.listWrapper.scrollTo(0, 0);
+        this.listWrapper.refresh();
       });
-      return ITEM_WIDTH * this.list.length + this.placeholderWidth;
-    },
-    placeholderWidth() {
-      return ((this.list.length % 4) + 1.335) * ITEM_WIDTH;
     }
   },
 
   mounted() {
-    this.$nextTick(() => {
-      this.listWrapper = new BScroll(this.$refs.spuList, {
-        click: true,
-        scrollX: true,
-        scrollY: false
-      });
-    });
+    this.createScroller();
+  },
+  beforeDestroy() {
+    this.listWrapper.destroy();
   },
   methods: {
+    createScroller() {
+      this.$nextTick(() => {
+        if (this.listWrapper) {
+          this.listWrapper.destroy();
+        }
+        this.listWrapper = new BScroll(this.$refs.spuList, {
+          click: true,
+          scrollX: true,
+          scrollY: false
+        });
+      });
+    },
     numAddUnit(num) {
       return num / 37.5 + 'rem';
     },
     handleSpuClick(e, item, index) {
       this.$parent.handleSpuSelected(item, index);
       const target = e.path.find(item => item.className.indexOf('Vl__spu-item') > -1);
-      console.dir(target);
       this.listWrapper.scrollToElement(target, 500, -10, 0);
     }
   }

src/views/vipLife/index.vue

@@ -15,8 +15,8 @@
         <cr-loading color="#ec1500" />
       </div>
       <template v-if="tips">
-        <div class="Vl__panel-title">温馨提示</div>
-        <div class="Vl__panel-tips" v-html="tips" />
+        <div class="Vl__panel-title">{{ tips.title }}</div>
+        <div class="Vl__panel-tips" v-html="tips.content" />
       </template>
     </div>
     <div class="Vl__bottom">
@@ -64,7 +64,9 @@ export default {
       return this.spuData[this.currentTab - 1] ? this.spuData[this.currentTab - 1].itemList : [];
     },
     tips() {
-      return tipsData[this.spuInfo.spuNos];
+      return this.spuInfo.type
+        ? tipsData[this.spuInfo.type] || tipsData[+('' + this.spuInfo.type)[0]] || {}
+        : {};
     }
   },
   mounted() {
@@ -89,7 +91,6 @@ export default {
       this.getSkuListDebounce();
     },
     handleSpuSelected(item) {
-      this.spuInfo = item;
       this.updateSpuInfo(item);
       this.getSkuListDebounce();
     },
@@ -110,18 +111,20 @@ export default {
     },
     getSkuListDebounce() {
       this.showLoading = true;
+      this.skuList = [];
       if (this.skuTimer) clearTimeout(this.skuTimer);
       this.skuTimer = setTimeout(() => {
         this.getSkuList();
       }, 600);
     },
     async getSkuList() {
-      this.skuList = [];
       const { spuNos, type } = this.spuInfo;
       const [res] = await rechargeApi.getSkuList(spuNos, type);
       if (res) {
         this.skuList = res.rechargeList;
-        this.handleSkuSelected(res.rechargeList[0], 0);
+        const defaultItem = res.rechargeList.find(item => item.hasStock);
+        const defaultIndex = res.rechargeList.findIndex(item => item.hasStock);
+        defaultItem && this.handleSkuSelected(defaultItem, defaultIndex);
       }
       this.showLoading = false;
     },