updated

src/views/order-list/components/freight-cell.vue

@@ -1,18 +1,157 @@
 <template>
   <div class="freight">
-    <van-cell title="运费信息" value="包邮" @click="showFreight = true" is-link/>
+    <van-cell title="运费信息" :value="text" @click="showFreight = true" is-link/>
+    <van-popup
+      v-model="showFreight"
+      round
+      position="bottom"
+      :close="onClose"
+    >
+      <div class="content">
+        <div class="title">运费设置</div>
+        <div class="check">
+          <van-radio-group v-model="radio">
+            <van-radio :name="item.id" v-for="item in checkList" :key="item.id">{{ item.name }}</van-radio>
+          </van-radio-group>
+        </div>
+        <van-field class="setFreight" v-if="radio === 1" v-model="number" type="number" placeholder="设置运费" />
+        <van-button @click="confirm" color="#FF5B00">确定</van-button>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    goodInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data () {
     return {
-      showFreight: true
+      showFreight: false,
+      radio: 0,
+      number: 0,
+      productInfo: JSON.parse(sessionStorage.getItem('productInfo'))
+    }
+  },
+  watch: {
+    goodInfo: {
+      handler (val) {
+        this.radio = val.postageFlag
+      },
+      deep: true
+    }
+  },
+  computed: {
+    checkList () {
+      return [
+        {
+          id: 0,
+          name: '包邮'
+        }, {
+          id: 1,
+          name: '不包邮'
+        }, {
+          id: 2,
+          name: '到付'
+        }
+      ]
+    },
+    postageFlag () {
+      return this.radio
+    },
+    postage () {
+      if (this.radio === 1) return Number(this.number).toFixed(2)
+      else return Number(this.productInfo.postage) + Number(this.productInfo.coldChain)
+    },
+    text () {
+      if (this.radio === 0) {
+        return '包邮'
+      } else if (this.radio === 1) {
+        return '¥' + this.postage
+      } else return '到付'
+    }
+  },
+  methods: {
+    onClose () {
+      this.showFreight = false
+    },
+    confirm () {
+      const info = JSON.parse(sessionStorage.getItem('productInfo'))
+      info.postage = this.postage
+      info.postageFlag = this.postageFlag
+      info.totalPrice = Number(info.totalPrice) + Number(this.postage)
+      this.$emit('handlerFreight', info)
+      this.showFreight = false
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  width: 100%;
+  text-align: center;
+  height: 10vw;
+  line-height: 10vw;
+  font-size: 4vw;
+  font-weight: 600;
+}
+.check {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 4vw 0;
+  ::v-deep .van-radio-group {
+    display: flex;
+    width: 90vw;
+    justify-content: space-between;
+    font-size: 3.6vw;
+    .van-radio {
+      overflow: initial !important;
+    }
+    .van-icon {
+      position: relative;
+      width: 5vw;
+      height: 5vw;
+    }
+    .van-radio__icon--checked .van-icon {
+      background: #fff;
+      border-color: #FF5B00;
+      &::before {
+        content: '';
+        display: absolute;
+        left: 0;
+        top: 0;
+        background: #FF5B00;
+        width: 2vw;
+        height: 2vw;
+        transform: translate(5%, -40%);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+.setFreight {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  width: 90vw;
+  padding: 0 10px;
+  margin-bottom: 4vw;
+}
+.van-button {
+  width: 80vw;
+  height: 12vw;
+  font-size: 4vw;
+  margin-bottom: 4vw;
+  border-radius: 1.2vw;
+}
 </style>

src/views/order-list/order-create.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <invoice-information @handlerInvoice="handlerInvoice" />
-    <freight-cell />
+    <freight-cell :goodInfo="goodInfo" @handlerFreight="handlerFreight"/>
     <div class="create">
       <div class="goods-num">共{{ allProductNumber }}件商品</div>
       <div class="all-price">
@@ -123,21 +123,13 @@ export default {
         }
       }
       return {}
-    },
-    n () {
-      return this.$route.query.n
-    },
-    u () {
-      return this.$route.query.u
-    },
-    b () {
-      return this.$route.query.b
     }
   },
   methods: {
     async settlementOrder (form) {
       const data = await settlementOrder(form)
       this.goodInfo = data.list[0]
+      sessionStorage.setItem('productInfo', JSON.stringify(this.goodInfo))
     },
     async orderAddress () {
       const { list } = await orderAddress({
@@ -174,6 +166,10 @@ export default {
     },
     handlerInvoice ($event) {
       this.orderInvoice = $event
+    },
+    handlerFreight ($event) {
+      console.log($event)
+      this.goodInfo = $event
     }
   }
 }
@@ -233,6 +229,7 @@ export default {
   }
   ::v-deep .van-cell {
     align-items: center;
+    padding: 0;
   }
   .all-price {
     display: flex;

src/views/shopping-mall/components/goods-sku.vue

@@ -18,7 +18,7 @@
     </template>
     <template #sku-actions="props">
       <div class="van-sku-actions">
-        <van-button v-if="isLock" @click="onPayProduct(props)" color="#FF5B00">立即购买</van-button>
+        <van-button @click="onPayProduct(props)" color="#FF5B00">立即购买</van-button>
       </div>
     </template>
     </van-sku>