web-store-retail-h5/pages/shareArea/haiShare.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-06-02 15:41:29
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header">

    </view>
    <view class="context">
      <u-form :model="form"
              labelAlign="right"
              labelWidth="75"
              :rules="rules"
              ref="uForm">
        <view class="kuang">
          <u-form-item :label="'发货方式'">
            <view class="pickerHui">
              <u-input v-model="form.deliveryName"
                       disabled
                       :placeholder="'请选择发货方式'"
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
        </view>

        <view class="kuang">
          <view class="disFlex tit_t">
            <view>{{'收货人信息'}}</view>
            <!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
          </view>
          <u-form-item :label="'收货人'"
                       prop="recName">
            <u-input v-model.trim="form.recName"
                     :placeholder="'请输入收货人'" />
          </u-form-item>
          <u-form-item :label="'收货电话'"
                       prop="recPhone">
            <u-input v-model.trim="form.recPhone" maxlength="20"
            type="number"
                     :placeholder="'请输入收货电话'" />
          </u-form-item>
          <u-form-item :label="'收货地址'"
                       prop="diqu"
                       @click='getDiqu'>
            <view class="picker">
              <u-input v-model.trim="form.diqu"
                       :placeholder="'请选收货地址'"
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item :label="'详细地址'"
                       prop="recAddress">
            <u--textarea v-model.trim="form.recAddress"
            maxlength="200"
                         :placeholder="'请输入详细地址'"></u--textarea>

          </u-form-item>
          <u-form-item :label="'邮费'">
            <u-input disabled
                     v-model="form.postage" />
          </u-form-item>
          <u-form-item :label="'备注'">
            <u--textarea v-model="form.remark"
                         :placeholder="'请输入备注'"></u--textarea>
          </u-form-item>
        </view>
      </u-form>
      <view class="kuang" v-for="item in goodList">
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品主图'}}</view>
            <img :src="item.cover"
                 alt="">
            <view class="sTit">{{'商品名称'}}</view>
            <view class="cTit">{{ item.productName }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'产品'}}</view>
            <view v-for="ctem,index in item.waresSkuList"
                  :key="index"
                  >
              <view class="cTit">{{ ctem.specValueNames }}
              </view>
            </view>
          </view>
        </view>
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品业绩'}}(￥)</view>
            <view class="cTit">{{ item.waresPrice | numberToCurrency }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'商品业绩'}}(PV)</view>
            <view class="cTit">{{ item.pv | numberToCurrency }}</view>
          </view>
        </view>
        <!-- <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品数量'}}</view>
            <u-number-box :min="1"
                          v-model="goodsNum"
                          @change="valChange"></u-number-box>
          </view>
          <view></view>
        </view> -->
      </view>
      <view class="kuang">
        <view class="disFlex just">
          <view>{{'商品金额总计'}}(¥)：</view>
          <view>{{ allDataObj.price | numberToCurrency}}</view>
        </view>
        <view class="disFlex just">
          <view>{{'商品业绩总计'}}(PV)：</view>
          <view>{{ allDataObj.pv | numberToCurrency}}</view>
        </view>
        <view class="disFlex just">
          <view>{{'邮费'}}:</view>
          <view>{{ form.postage | numberToCurrency}}</view>
        </view>
      </view>
      <view class="kuang disFlex">
        <u-checkbox-group v-model="checkboxValue1"
                          @change="checkboxChange">
          <u-checkbox :name="1">
          </u-checkbox>
        </u-checkbox-group>
        <view class="tit3">{{'请阅读并同意'}}</view>
        <view class="tit2"
              @click="toAgree"> 《{{'购买协议'}}》</view>

      </view>
    </view>
    <!-- 占空 -->
    <view style="height:150rpx"></view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_l">
          <view class="disFlex">
            <view class="h1">{{ '总价' }}</view>
            <view class="r1">¥{{ totalMont  | numberToCurrency}}</view>
          </view>
          <view class="disFlex">
            <view class="h1">{{'业绩'}}</view>
            <view class="l1">¥{{ achiveAmount | numberToCurrency}}</view>
          </view>
        </view>
        <view class="footer_r">
          <u-button type="success"
                    class="uBtn"
                    shape="circle"
                    :loading="isLoading"
                    :loadingText="'购买中'"
                    @tap="goBuy"
                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即购买'}} </u-button>

        </view>
      </view>
    </view>
    <agreement ref="agreement"></agreement>
    <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>

  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/config/goods'
import agreement from '@/components/agreement.vue'
export default {
  components: {
    'v-address': address,
    agreement,
  },
  data() {
    return {
      postList:[],
      allGoodsData: {},
      allDataObj:{},
      goodList:[],
      defaultCode: [],
      specialArea: 21,
      form: {
        deliveryName: '快递发货',
        deliveryWay: 1,
        postage: 0,
        transType: 1,
      },
      deliList: [],
      diqu: '',
      allData: [],
      goodsNum: 1,
      checkboxValue1: [],
      priceAmount: 0, //商品总价
      achiveAmount: 0, //总业绩
      totalMont: 0,
      orderItemsParams: [],
      isLoading: false,
      hasChecked: '',
      rules: {
        recName: [
          {
            required: true,
            message: '请输入收货人',
            trigger: ['change', 'blur'],
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入收货电话',
            trigger: ['change', 'blur'],
          },
        ],
        diqu: [
          {
            required: true,
            message: '请选择收货地址',
            trigger: ['change', 'blur'],
          },
        ],
        recAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onLoad(options) {
    // this.allData = JSON.parse(options.allData)
    // this.hasChecked = options.hasChecked

    this.allData = JSON.parse(options.allData)
    console.log('%c [ this.allData ]-248', 'font-size:13px; background:#5a9c24; color:#9ee068;', this.allData)
    let confirmOrderWaresInfoParamsList = []
    this.hasChecked = options.hasChecked || ''
    this.allData.forEach((item) => {
      item.waresSkuList.forEach((ctem) => {
        confirmOrderWaresInfoParamsList.push({
          pkTWares: ctem.pkTWares,
          pkTWaresSku:ctem.pkTWaresSku||ctem.pkThWaresSku,
          quantity: item.quantity,
          source: item.source,
        })
      })
    })
    // 获取购物车详情
    this.getCatDetail(confirmOrderWaresInfoParamsList)
    this.getGenerate()
    this.valChange({ value: 1 })
  },
  onShow() {},
  methods: {
    getCatDetail(confirmOrderWaresInfoParamsList) {
      api
        .waresinfo({
          confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
        })
        .then((res) => {
          this.goodList = res.data
          let price = 0
          let pv = 0
          this.goodList.forEach((item) => {
            item.waresItemsParamList = []
            price += Number(item.priceAmount)
            pv += Number(item.pv)
            item.waresSkuList.forEach((ctem) => {
              item.waresItemsParamList.push({
                pkWaresSpecsSku: ctem.pkId,
              })
            })
          })
          this.allDataObj.price = price
          this.allDataObj.pv = pv
          this.totalMont = price
          this.achiveAmount = pv
          this.totalAmont = this.allDataObj.price
          let arr = []
          this.goodList.forEach((item) => {
            arr.push({
              channel: item.source,
              pkId: item.pkId,
              quantity: item.quantity,
              waresItemsParamList: item.waresItemsParamList,
            })
          })
          this.postList = arr
          this.allGoodsData.specialArea = 21
        })},
    addAdress() {
      uni.navigateTo({
        url: '/pages/address/index',
      })
    },
    toAgree() {
      // agreeMent
      this.$refs.agreement.openDig()
    },
    getGenerate() {
      api.generate().then((res) => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    goBuy() {
      if (this.checkboxValue1.length == 0) {
          uni.showToast({
            title: '请阅读并同意购买协议',
            icon: 'none',
            duration: 1500,
          })
          return
        }
      this.$refs.uForm.validate().then((res) => {
        this.isLoading = true
        api
          .confirmShareOrder(
            Object.assign({}, this.form, {
              orderItemsParams: this.postList,
              specialArea: 21,
            })
          )
          .then((res) => {
            this.isLoading = false
            if (res.code == 200) {
              uni.navigateTo({
                url:
                  '/pages/pay/index?paramsPost=' +
                  JSON.stringify(res.data) +
                  '&businessType=1',
              })
            }
          })
      })
    },
    setGoodlistType() {
      let carList = {
        channel: this.allData.source,
        pkId: this.allData.pkId,
        quantity: this.goodsNum,
        waresItemsParamList: [
          {
            pkWaresSpecsSku: this.hasChecked,
          },
        ],
      }
      this.orderItemsParams = [carList]
    },
    checkboxChange() {},
    valChange(e) {
      this.goodsNum = e.value
      this.priceAmount = this.allData.waresPrice * this.goodsNum
      this.achiveAmount = this.allData.waresAchieve * this.goodsNum
      this.totalMont = this.priceAmount.toFixed(3)
      this.setGoodlistType()
      if (this.form.recProvince) {
        this.queryAdressPostage()
      }
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    confirmPopup() {},
    queryAdressPostage() {
      api
        .queryAdressPostage(
          Object.assign({}, this.form, {
            orderItemsParams:this.postList,
          })
        )
        .then((res) => {
          this.form.postage = Number(res.data.postage).toFixed(2)
          this.totalMont =
            parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
          this.totalMont = this.totalMont.toFixed(3)
        })
    },
    addressData(diqu, obj) {
      this.form.diqu = diqu
      this.form.recProvince = obj.province
      this.form.recCity = obj.city
      this.form.recCounty = obj.county
      this.$forceUpdate()
      this.setGoodlistType()
      this.queryAdressPostage()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
}
.index_header {
  background: #f9f9f9;;
  height: 330rpx;
}
.context {
  position: relative;
  padding: 24rpx;
  margin-top: -360rpx;
}
.disFlex {
  display: flex;
  align-items: center;
}
.just {
  justify-content: space-between;
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}
.kuang {
  margin-top: 20rpx;
  padding: 20rpx 40rpx;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
  .tit_t {
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .lan {
    font-size: 10px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #289fff;
  }
}
.picker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
}
.pickerHui {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
  background: #f5f7fa;
}
.kuang_t {
  display: flex;
  .kuang_tl {
    flex: 1;
    img {
      width: 40px;
      height: 40px;
      border-radius: 6px 6px 6px 6px;
    }
  }
  .kuang_tr {
    flex: 1;
  }
}
.sTit {
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  margin: 14rpx 0;
}
.cTit {
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;

  margin-bottom: 14rpx;
}
.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;
  background: #fff;
  .footer_l {
  }
  .footer_r {
    // flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}
.h1 {
  font-size: 10px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}
.r1 {
  font-size: 18px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ed4623;
}
.l1 {
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #384a8a;
}
.tit2 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #005BAC;
}
.tit3 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333;
}
</style>