879 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			879 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <!--
 | |
|  * @Descripttion:
 | |
|  * @version:
 | |
|  * @Author: kBank
 | |
|  * @Date: 2022-11-21 15:11:22
 | |
| -->
 | |
| <template>
 | |
|   <view class="content">
 | |
|     <view class="context">
 | |
|       <view
 | |
|         class="kuang"
 | |
|         v-for="(item, index) in shopCarList"
 | |
|         :key="item.specialArea"
 | |
|       >
 | |
|         <view
 | |
|           v-for="(ctem, cndex) in item.shoppingCartList"
 | |
|           :key="cndex"
 | |
|           class="goodList"
 | |
|         >
 | |
|           <!-- <u-checkbox activeColor="red"
 | |
|                             :name="ctem.shoppingId"></u-checkbox> -->
 | |
|           <view class="goodList_i">
 | |
|             <view class="goodList_it">
 | |
|               <img :src="ctem.cover1" class="cover" alt="" />
 | |
|               <view class="goodList_ir">
 | |
|                 <view class="tit1">
 | |
|                   {{ ctem.waresName }}
 | |
|                 </view>
 | |
|                 <view class="goodList_ib">
 | |
|                   <view class="tit2">
 | |
|                     {{ ctem.waresPrice | numberToCurrency | isLocal }}
 | |
|                   </view>
 | |
|                   <view class="tit3"
 | |
|                     >业绩: {{ ctem.achieve | numberToCurrency | isLocal }}</view
 | |
|                   >
 | |
|                 </view>
 | |
|               </view>
 | |
|             </view>
 | |
|             <view
 | |
|               v-for="(stem, sndex) in ctem.productParams"
 | |
|               :key="sndex"
 | |
|               class="product_i"
 | |
|             >
 | |
|               <img :src="stem.cover" alt="" />
 | |
|               <view class="product_il">
 | |
|                 <view class="tit4"
 | |
|                   >{{ stem.productName
 | |
|                   }}{{
 | |
|                     (stem.waresItemsParamsList.length > 0 &&
 | |
|                       stem.waresItemsParamsList[0].specsName) ||
 | |
|                     ''
 | |
|                   }}</view
 | |
|                 >
 | |
|                 <!-- <view class="tit4"></view> -->
 | |
|                 <view class="tit5"
 | |
|                   >x{{
 | |
|                     (stem.waresItemsParamsList.length > 0 &&
 | |
|                       stem.waresItemsParamsList[0].quantity) ||
 | |
|                     ''
 | |
|                   }}</view
 | |
|                 >
 | |
|               </view>
 | |
|             </view>
 | |
|             <view class="goodsSet">
 | |
|               <u-number-box
 | |
|                 :min="1"
 | |
|                 @change="changeCar($event, item, ctem)"
 | |
|                 v-model="ctem.number"
 | |
|               ></u-number-box>
 | |
|               <u-icon
 | |
|                 name="trash"
 | |
|                 @tap="delOne(ctem)"
 | |
|                 size="26"
 | |
|                 color="#BFBFBF"
 | |
|               ></u-icon>
 | |
|             </view>
 | |
|           </view>
 | |
|         </view>
 | |
|         <!-- </u-checkbox-group> -->
 | |
|       </view>
 | |
|     </view>
 | |
|     <view class="kong_t" v-show="cartEmpty">
 | |
|       <img class="kong" src="@/static/images/kong.png" alt=""
 | |
|     /></view>
 | |
|     <view class="zhan"></view>
 | |
|     <!-- 底部 -->
 | |
|     <view class="footer_f">
 | |
|       <view class="footer">
 | |
|         <view class="footer_l">
 | |
|           <view class="footer_ll">
 | |
|             <u-icon size="36" name="shopping-cart"> </u-icon>
 | |
|             <view class="footer_lr">
 | |
|               <view class="r1">{{
 | |
|                 totalPrice | numberToCurrency | isLocal
 | |
|               }}</view>
 | |
|               <view class="l1">业绩:{{ totalAchive | numberToCurrency }}</view>
 | |
|             </view>
 | |
|           </view>
 | |
|         </view>
 | |
|         <view class="footer_r">
 | |
|           <u-button
 | |
|             type="success"
 | |
|             class="uBtn"
 | |
|             shape="circle"
 | |
|             :loading="isLoading"
 | |
|             :loadingText="'购买中'"
 | |
|             @tap="goBuy"
 | |
|             :disabled="submitDisabled"
 | |
|             color="#005BAC"
 | |
|             >{{ '去结算' }}
 | |
|           </u-button>
 | |
|         </view>
 | |
|       </view>
 | |
|     </view>
 | |
|     <view class="pp">
 | |
|       <u-popup
 | |
|         :show="dialogVisible2"
 | |
|         :closeable="true"
 | |
|         :closeOnClickOverlay="false"
 | |
|         mode="center"
 | |
|         @close="dialogVisible2 = false"
 | |
|       >
 | |
|         <view class="popList">
 | |
|           <u-checkbox-group
 | |
|             v-model="allTable"
 | |
|             placement="column"
 | |
|             @change="handleSelectionChange"
 | |
|           >
 | |
|             <view class="popList_i" v-for="item in tableData" :key="item.pkId">
 | |
|               <u-checkbox :name="item.pkId"> </u-checkbox>
 | |
|               <view class="popList_ii">
 | |
|                 <img :src="item.cover1" alt="" />
 | |
|                 <view>
 | |
|                   <view>{{ item.waresName }}</view>
 | |
|                   <view>{{ item.waresCode }}</view>
 | |
|                   <view>{{ item.waresPrice }}</view>
 | |
|                   <!-- <view>{{ item.quantity }}</view> -->
 | |
|                   <u-number-box v-model="item.quantity" :min="1"></u-number-box>
 | |
|                 </view>
 | |
|               </view>
 | |
|             </view>
 | |
|           </u-checkbox-group>
 | |
|           <view class="popBtm">
 | |
|             <view>合计:{{ total | toThousandthAndKeepDecimal }}</view>
 | |
|             <view class="que" @click="tableTrue">确定</view>
 | |
|           </view>
 | |
|         </view>
 | |
|       </u-popup>
 | |
|     </view>
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import * as api from '@/config/goods'
 | |
| import {
 | |
|   REGIEST_AREA,
 | |
|   UPGRADE_AREA,
 | |
|   REPURCHASE_AREA,
 | |
|   REISSUE_AREA,
 | |
| } from '@/util/specialAreaMap'
 | |
| import { MEMBER_SIGN } from '@/util/common'
 | |
| 
 | |
| export default {
 | |
|   data() {
 | |
|     return {
 | |
|       isSelectAll: [],
 | |
|       shopCarList: [],
 | |
|       isLoading: false,
 | |
|       isTo: 0,
 | |
|       goodsCheck: [],
 | |
|       totalPrice: 0,
 | |
|       totalAchive: 0,
 | |
|       num: 0,
 | |
|       pkCountry: 1,
 | |
|       specialArea: 1,
 | |
|       userInfo: {},
 | |
|       tableData: [],
 | |
|       dialogVisible2: false,
 | |
|       selTable: [],
 | |
|       allTable: [],
 | |
|       total: '0.00',
 | |
|       // show:false,
 | |
|       // title:'提示',
 | |
|       // content:'确认删除该商品?'
 | |
|     }
 | |
|   },
 | |
|   computed: {
 | |
|     submitDisabled() {
 | |
|       if (this.goodsCheck[0]?.orderItemsParams) {
 | |
|         return this.goodsCheck[0]?.orderItemsParams?.length === 0
 | |
|       }
 | |
|       return true
 | |
|     },
 | |
|     cartEmpty() {
 | |
|       return (
 | |
|         this.shopCarList.length === 0 ||
 | |
|         this.shopCarList[0]?.shoppingCartList?.length === 0
 | |
|       )
 | |
|     },
 | |
|   },
 | |
|   watch: {
 | |
|     selTable: {
 | |
|       handler(n, o) {
 | |
|         let total = 0
 | |
|         n.forEach(item => {
 | |
|           total += Number(item.waresPrice) * item.quantity
 | |
|         })
 | |
|         this.total = total
 | |
|       },
 | |
|       deep: true,
 | |
|     },
 | |
|   },
 | |
|   props: {
 | |
|     areas: {
 | |
|       type: Number | String,
 | |
|       default: 1,
 | |
|     },
 | |
|   },
 | |
|   onLoad(options) {
 | |
|     // this.getCarList()
 | |
|   },
 | |
|   onShow() {
 | |
|     // this.getCarList()
 | |
|   },
 | |
|   methods: {
 | |
|     tableTrue() {
 | |
|       if (this.selTable.length > 0) {
 | |
|         let a = {
 | |
|           specialArea: this.goodsCheck[0].specialArea,
 | |
|           orderItemsParams: [],
 | |
|         }
 | |
|         a.orderItemsParams = this.selTable.map(item => {
 | |
|           return {
 | |
|             waresCode: item.waresCode,
 | |
|             quantity: item.quantity,
 | |
|             waresItemsParamList: item.productGroup,
 | |
|             energySilo: 1,
 | |
|           }
 | |
|         })
 | |
|         a.orderItemsParams.forEach(item => {
 | |
|           item.waresItemsParamList = item.waresItemsParamList.map(ctem => {
 | |
|             return {
 | |
|               pkWaresSpecsSku: ctem.pkSkuId,
 | |
|               quantity: ctem.quantity,
 | |
|             }
 | |
|           })
 | |
|         })
 | |
|         api.energyShopSilo(a).then(res => {
 | |
|           if (res.code == 200) {
 | |
|             this.dialogVisible2 = false
 | |
|             let shoppArr = this.goodsCheck[0].orderItemsParams.map(item => {
 | |
|               return item.shoppingId
 | |
|             })
 | |
|             if (this.goodsCheck[0].specialArea == 1) {
 | |
|               uni.navigateTo({
 | |
|                 url:
 | |
|                   '/pages/regiest/index?specialArea=' +
 | |
|                   this.goodsCheck[0].specialArea +
 | |
|                   '&shoppArr=' +
 | |
|                   JSON.stringify(shoppArr) +
 | |
|                   '&selTable=' +
 | |
|                   JSON.stringify(this.selTable),
 | |
|               })
 | |
|             } else if (this.goodsCheck[0].specialArea == 2) {
 | |
|               uni.navigateTo({
 | |
|                 url:
 | |
|                   '/pages/other/index?specialArea=' +
 | |
|                   this.goodsCheck[0].specialArea +
 | |
|                   '&shoppArr=' +
 | |
|                   JSON.stringify(shoppArr) +
 | |
|                   '&selTable=' +
 | |
|                   JSON.stringify(this.selTable),
 | |
|               })
 | |
|             }
 | |
|           }
 | |
|         })
 | |
|       } else {
 | |
|         uni.showToast({
 | |
|           title: '请选择赠品',
 | |
|           icon: 'none',
 | |
|         })
 | |
|       }
 | |
|     },
 | |
|     handleSelectionChange(val) {
 | |
|       let arr = []
 | |
|       this.tableData.forEach(item => {
 | |
|         val.forEach(ctem => {
 | |
|           if (item.pkId == ctem) {
 | |
|             arr.push(item)
 | |
|           }
 | |
|         })
 | |
|       })
 | |
|       this.selTable = arr
 | |
|     },
 | |
|     selectAll(e) {
 | |
|       let i = 0
 | |
|       // isSelected
 | |
|       if (e.length > 0) {
 | |
|         this.shopCarList.forEach(item => {
 | |
|           item.isSelected = true
 | |
|           item.shoppingCartList.forEach(ctem => {
 | |
|             ctem.isSelected = true
 | |
|             item.isSelect.push(ctem.shoppingId)
 | |
|           })
 | |
|         })
 | |
|         this.shopCarList.forEach(item => {
 | |
|           if (item.isSelected) {
 | |
|             i++
 | |
|           }
 | |
|         })
 | |
|         this.isTo = i
 | |
|         // this.checkArea()
 | |
|       } else {
 | |
|         this.shopCarList.forEach(item => {
 | |
|           item.isSelected = false
 | |
|           item.shoppingCartList.forEach(ctem => {
 | |
|             ctem.isSelected = false
 | |
|             item.isSelect = []
 | |
|           })
 | |
|         })
 | |
|         this.shopCarList.forEach(item => {
 | |
|           if (item.isSelected) {
 | |
|             i++
 | |
|           }
 | |
|         })
 | |
|         this.isTo = i
 | |
|         // this.checkArea()
 | |
|       }
 | |
|     },
 | |
|     delAll() {
 | |
|       let arr = []
 | |
|       this.shopCarList.forEach(item => {
 | |
|         item.isSelect.forEach(ctem => {
 | |
|           arr.push({
 | |
|             shoppingId: ctem,
 | |
|           })
 | |
|         })
 | |
|       })
 | |
|       api.batchDelShopping({ deleteList: arr }).then(res => {
 | |
|         this.getCarList()
 | |
|         // this.getShoppingCount()
 | |
|         uni.showToast({
 | |
|           title: '删除成功',
 | |
|           icon: 'none',
 | |
|           duration: 1500,
 | |
|         })
 | |
|       })
 | |
|     },
 | |
|     goBuy() {
 | |
|       let shoppArr = this.goodsCheck[0].orderItemsParams.map(item => {
 | |
|         return item.shoppingId
 | |
|       })
 | |
|       uni.setStorageSync('allGoods', JSON.stringify(shoppArr))
 | |
|       if (
 | |
|         [REGIEST_AREA.id, UPGRADE_AREA.id].includes(
 | |
|           this.goodsCheck[0].specialArea
 | |
|         )
 | |
|       ) {
 | |
|         let deleteList = []
 | |
|         shoppArr.forEach(item => {
 | |
|           deleteList.push({
 | |
|             shoppingId: item,
 | |
|           })
 | |
|         })
 | |
|         const area =
 | |
|           this.goodsCheck[0].specialArea == REGIEST_AREA.id
 | |
|             ? 'regiest'
 | |
|             : 'upgrade'
 | |
|         uni.navigateTo({
 | |
|           url:
 | |
|             `/pages/${area}/index?specialArea=` +
 | |
|             this.goodsCheck[0].specialArea +
 | |
|             '&shoppArr=' +
 | |
|             JSON.stringify(shoppArr),
 | |
|         })
 | |
|       } else {
 | |
|         if (this.goodsCheck[0].specialArea == 30) {
 | |
|           if (this.goodsCheck[0].orderItemsParams.length > 1) {
 | |
|             uni.showToast({
 | |
|               title: '续约专区每次只能购买一件商品',
 | |
|               icon: 'none',
 | |
|             })
 | |
|             return false
 | |
|           } else {
 | |
|             let num = this.goodsCheck[0].orderItemsParams.some(
 | |
|               item => item.quantity > 1
 | |
|             )
 | |
|             if (num) {
 | |
|               uni.showToast({
 | |
|                 title: '续约专区每次只能购买一件商品',
 | |
|                 icon: 'none',
 | |
|               })
 | |
|               return false
 | |
|             } else {
 | |
|               uni.navigateTo({
 | |
|                 url:
 | |
|                   '/pages/other/index?specialArea=' +
 | |
|                   this.goodsCheck[0].specialArea +
 | |
|                   '&shoppArr=' +
 | |
|                   JSON.stringify(shoppArr),
 | |
|               })
 | |
|             }
 | |
|           }
 | |
|         } else {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/other/index?specialArea=' +
 | |
|               this.goodsCheck[0].specialArea +
 | |
|               '&shoppArr=' +
 | |
|               JSON.stringify(shoppArr),
 | |
|           })
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     // 修改数量
 | |
|     changeCar(e, item, ctem) {
 | |
|       api
 | |
|         .plusReduceShopping({
 | |
|           shoppingId: ctem.shoppingId,
 | |
|           number: e.value,
 | |
|           specialArea: item.specialArea,
 | |
|         })
 | |
|         .then(res => {
 | |
|           if (res.code == 200) {
 | |
|             this.dealData()
 | |
|           } else {
 | |
|             this.getCarList()
 | |
|           }
 | |
| 
 | |
|           // this.getShoppingCount()
 | |
|         })
 | |
|     },
 | |
|     // 计算价格
 | |
|     checkPrice() {
 | |
|       let totalPrice = 0
 | |
|       let totalAchive = 0
 | |
|       let num = 0
 | |
|       this.goodsCheck.forEach(item => {
 | |
|         item.orderItemsParams.forEach(ctem => {
 | |
|           totalPrice += parseFloat(ctem.waresPrice * ctem.quantity)
 | |
|           totalAchive += parseFloat(ctem.achieve * ctem.quantity)
 | |
|           num += ctem.quantity
 | |
|         })
 | |
|       })
 | |
|       // if (this.goodsCheck.length != 1) {
 | |
|       this.totalPrice = totalPrice.toFixed(2)
 | |
|       this.totalAchive = totalAchive.toFixed(2)
 | |
|       this.num = num
 | |
|       // }
 | |
|     },
 | |
|     checkboxChange(e, item) {
 | |
|       if (e.length > 0) {
 | |
|         this.$set(item, 'isSelected', true)
 | |
|         this.$set(item, 'isSelect', e)
 | |
|         // this.checkArea()
 | |
|       } else {
 | |
|         this.$set(item, 'isSelected', false)
 | |
|         this.$set(item, 'isSelect', e)
 | |
|         // this.checkArea()
 | |
|       }
 | |
|       let i = 0
 | |
|       this.shopCarList.forEach(item => {
 | |
|         if (item.isSelected) {
 | |
|           i++
 | |
|         }
 | |
|       })
 | |
|       this.isTo = i
 | |
|       let blin = true
 | |
|       this.shopCarList.forEach(item => {
 | |
|         if (item.isSelect.length != item.shoppingCartList.length) {
 | |
|           blin = false
 | |
|         }
 | |
|       })
 | |
|       if (blin) {
 | |
|         this.isSelectAll = [1]
 | |
|       } else {
 | |
|         this.isSelectAll = []
 | |
|       }
 | |
|     },
 | |
|     // 单删
 | |
|     delOne(ctem) {
 | |
|       let deleteList = [
 | |
|         {
 | |
|           shoppingId: ctem.shoppingId,
 | |
|         },
 | |
|       ]
 | |
|       api.batchDelShopping({ deleteList: deleteList }).then(res => {
 | |
|         this.getCarList()
 | |
|         // this.getShoppingCount()
 | |
|         uni.showToast({
 | |
|           title: '删除成功',
 | |
|           icon: 'none',
 | |
|           duration: 1500,
 | |
|         })
 | |
|       })
 | |
|     },
 | |
|     getCarList(specialArea) {
 | |
|       if (specialArea) {
 | |
|         this.specialArea = specialArea
 | |
|         this.userInfo = uni.getStorageSync('User')
 | |
|         if (this.specialArea == 1) {
 | |
|           if (uni.getStorageSync('pkCountry')) {
 | |
|             this.pkCountry = uni.getStorageSync('pkCountry')
 | |
|           } else {
 | |
|             this.pkCountry = this.userInfo.pkSettleCountry
 | |
|           }
 | |
|         } else {
 | |
|           this.pkCountry = this.userInfo.pkSettleCountry
 | |
|         }
 | |
|       }
 | |
|       api
 | |
|         .getShopping({
 | |
|           specialArea: this.specialArea,
 | |
|           pkCountry: this.pkCountry,
 | |
|         })
 | |
|         .then(res => {
 | |
|           res.data.forEach(item => {
 | |
|             item.isSelected = false
 | |
|             item.isSelect = []
 | |
|             item.shoppingCartList.forEach(ctem => {
 | |
|               ctem.isSelected = false
 | |
|               ctem.waresItemsParamList = []
 | |
|               if (item.specialArea != 21) {
 | |
|                 ctem.productParams.forEach(stem => {
 | |
|                   if (stem.waresItemsParamsList.length > 0) {
 | |
|                     stem.waresItemsParamsList[0].pkWaresSpecsSku =
 | |
|                       stem.waresItemsParamsList[0].pkSkuId
 | |
|                     stem.waresItemsParamsList[0].productName = stem.productName
 | |
|                     ctem.waresItemsParamList.push(stem.waresItemsParamsList[0])
 | |
|                   }
 | |
|                 })
 | |
|               } else {
 | |
|               }
 | |
|             })
 | |
|           })
 | |
|           this.shopCarList = res.data
 | |
|           this.goPay()
 | |
|           this.dealData()
 | |
|         })
 | |
|     },
 | |
|     goPay() {
 | |
|       let arr = []
 | |
|       this.shopCarList.forEach(item => {
 | |
|         item.shoppingCartList.forEach(ctem => {
 | |
|           arr.push({
 | |
|             specialArea: item.specialArea,
 | |
|             orderItemsParams: [
 | |
|               {
 | |
|                 waresCode: ctem.waresCode,
 | |
|                 waresName: ctem.waresName,
 | |
|                 achieve: ctem.achieve,
 | |
|                 shoppingId: ctem.shoppingId,
 | |
|                 waresPrice: ctem.waresPrice,
 | |
|                 cover1: ctem.cover1,
 | |
|                 source: ctem.source,
 | |
|                 quantity: ctem.number,
 | |
|                 waresItemsParamList: ctem.waresItemsParamList,
 | |
|                 waresSkuList: ctem.waresSkuList || [],
 | |
|               },
 | |
|             ],
 | |
|           })
 | |
|         })
 | |
|       })
 | |
|       const arrayHashmap = arr.reduce((obj, item) => {
 | |
|         obj[item.specialArea]
 | |
|           ? obj[item.specialArea].orderItemsParams.push(
 | |
|               ...item.orderItemsParams
 | |
|             )
 | |
|           : (obj[item.specialArea] = item)
 | |
|         return obj
 | |
|       }, {})
 | |
|       this.goodsCheck = Object.values(arrayHashmap)
 | |
|     },
 | |
|     // 处理数据
 | |
|     dealData() {
 | |
|       let arr = [
 | |
|         {
 | |
|           specialArea: this.shopCarList[0].specialArea,
 | |
|           orderItemsParams: [],
 | |
|         },
 | |
|       ]
 | |
|       this.shopCarList[0].shoppingCartList.forEach(ctem => {
 | |
|         arr[0].orderItemsParams.push({
 | |
|           waresCode: ctem.waresCode,
 | |
|           waresName: ctem.waresName,
 | |
|           shoppingId: ctem.shoppingId,
 | |
|           achieve: ctem.achieve,
 | |
|           waresPrice: ctem.waresPrice,
 | |
|           cover1: ctem.cover1,
 | |
|           source: ctem.source,
 | |
|           quantity: ctem.number,
 | |
|           waresItemsParamList: ctem.waresItemsParamList,
 | |
|           waresSkuList: ctem.waresSkuList || [],
 | |
|         })
 | |
|       })
 | |
|       this.goodsCheck = arr
 | |
|       this.checkPrice()
 | |
|     },
 | |
|   },
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .content {
 | |
|   background: #f9f9f9;
 | |
|   height: 50vh;
 | |
|   overflow-y: auto;
 | |
| }
 | |
| 
 | |
| .context {
 | |
|   // padding: 24rpx;
 | |
| }
 | |
| 
 | |
| .kuang {
 | |
|   // padding: 20rpx 40rpx;
 | |
|   background: #fff;
 | |
|   box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5); // border-top: 20rpx solid #f6f5f3;
 | |
| }
 | |
| 
 | |
| .kuang_t {
 | |
|   border-bottom: 1px solid #eeeeee;
 | |
|   padding: 40rpx 24rpx;
 | |
| }
 | |
| 
 | |
| .goodList {
 | |
|   display: flex;
 | |
|   padding: 0 20rpx;
 | |
|   border-bottom: 1px solid #eee;
 | |
| }
 | |
| 
 | |
| .cover {
 | |
|   width: 136rpx;
 | |
|   height: 136rpx;
 | |
|   background: #ffffff;
 | |
|   border: 1px solid #eeeeee;
 | |
|   border-radius: 10rpx;
 | |
| }
 | |
| 
 | |
| .goodList_i {
 | |
|   flex: 1;
 | |
| }
 | |
| 
 | |
| .goodList_it {
 | |
|   display: flex;
 | |
|   padding: 20rpx 0;
 | |
|   .goodList_ir {
 | |
|     margin-left: 20rpx;
 | |
|     flex: 1;
 | |
|     display: flex;
 | |
|     flex-direction: column;
 | |
|     justify-content: space-between;
 | |
|     .goodList_ib {
 | |
|       display: flex;
 | |
|       align-items: center;
 | |
|       justify-content: space-between;
 | |
|       img {
 | |
|         width: 56rpx;
 | |
|         height: 56rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goodsSet {
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   align-items: center;
 | |
|   padding: 26rpx 0;
 | |
| }
 | |
| 
 | |
| .product_i {
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
|   background: #f6f6f6;
 | |
|   padding: 15rpx;
 | |
|   .product_il {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     flex: 1;
 | |
|     justify-content: space-between;
 | |
|     margin-left: 20rpx;
 | |
|   }
 | |
|   img {
 | |
|     width: 50rpx;
 | |
|     height: 50rpx;
 | |
|     background: #ffffff;
 | |
|     border: 1px solid #dddddd;
 | |
|     border-radius: 10rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .tit1 {
 | |
|   font-size: 28rpx;
 | |
|   font-family: Source Han Sans CN;
 | |
|   font-weight: 400;
 | |
|   color: #333333;
 | |
| }
 | |
| 
 | |
| .tit2 {
 | |
|   font-size: 36rpx;
 | |
|   font-family: Source Han Sans CN;
 | |
|   font-weight: bold;
 | |
|   color: #f82c1a;
 | |
| }
 | |
| 
 | |
| .tit3 {
 | |
|   font-size: 26rpx;
 | |
|   font-family: Source Han Sans CN;
 | |
|   font-weight: 400;
 | |
|   color: #999999;
 | |
| }
 | |
| 
 | |
| .tit4 {
 | |
|   font-size: 28rpx;
 | |
|   font-family: PingFang SC;
 | |
|   font-weight: 400;
 | |
|   color: #333333;
 | |
| }
 | |
| 
 | |
| .tit5 {
 | |
|   font-size: 24rpx;
 | |
|   font-family: Source Han Sans CN;
 | |
|   font-weight: 400;
 | |
|   color: #999999;
 | |
| }
 | |
| 
 | |
| .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;
 | |
|   background: #fff;
 | |
|   .footer_l {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     .footer_ll {
 | |
|       position: relative;
 | |
|       display: flex;
 | |
|       align-items: center;
 | |
|       .pop {
 | |
|         position: absolute;
 | |
|         top: -16rpx;
 | |
|         right: -16rpx;
 | |
|         width: 28rpx;
 | |
|         height: 28rpx;
 | |
|         line-height: 28rpx;
 | |
|         background: #005bac;
 | |
|         box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
 | |
|         border-radius: 50%;
 | |
|         text-align: center;
 | |
|         font-size: 22rpx;
 | |
|         font-family: Arial;
 | |
|         font-weight: bold;
 | |
|         color: #f1f2f7;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
|   .footer_lr {
 | |
|     margin-left: 20rpx; // display: flex;
 | |
|     // align-items: center;
 | |
|   }
 | |
|   .footer_r {
 | |
|     // flex: 1;
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     font-size: 20rpx;
 | |
|     font-weight: 500;
 | |
|     color: #333333;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .disFlex {
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
| }
 | |
| 
 | |
| .h1 {
 | |
|   font-size: 10px;
 | |
|   font-family:
 | |
|     PingFang SC-Medium,
 | |
|     PingFang SC;
 | |
|   font-weight: 500;
 | |
|   color: #333333;
 | |
|   margin-right: 20rpx;
 | |
| }
 | |
| 
 | |
| .r1 {
 | |
|   font-size: 36rpx;
 | |
|   font-family: Source Han Sans CN;
 | |
|   font-weight: 400;
 | |
|   color: #f82c1a;
 | |
|   margin-right: 20rpx;
 | |
| }
 | |
| 
 | |
| .l1 {
 | |
|   font-size: 24rpx;
 | |
|   font-family: PingFang SC;
 | |
|   font-weight: 400;
 | |
|   color: #333333;
 | |
|   margin-right: 20rpx;
 | |
| }
 | |
| 
 | |
| .uBtn {
 | |
|   padding: 20rpx 70rpx;
 | |
| }
 | |
| 
 | |
| .zhan {
 | |
|   height: 240rpx;
 | |
| }
 | |
| 
 | |
| .deldel {
 | |
|   color: #005bac;
 | |
|   margin-left: 20rpx;
 | |
| }
 | |
| 
 | |
| .sel {
 | |
|   position: relative;
 | |
| }
 | |
| 
 | |
| .kong_t {
 | |
|   text-align: center;
 | |
|   padding-top: 20%;
 | |
| }
 | |
| 
 | |
| .kong {
 | |
|   width: 576rpx;
 | |
|   height: 406rpx;
 | |
| }
 | |
| ::v-deep .pp .u-popup__content {
 | |
|   width: 80%;
 | |
|   height: 60%;
 | |
|   overflow-y: auto;
 | |
| }
 | |
| .popList {
 | |
|   padding-top: 40rpx;
 | |
| }
 | |
| .popList_i {
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
|   padding: 0rpx 40rpx 0rpx 20rpx;
 | |
|   margin-bottom: 40rpx;
 | |
|   .popList_ii {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|   }
 | |
|   img {
 | |
|     width: 160rpx;
 | |
|     height: 160rpx;
 | |
|     border-radius: 8px;
 | |
|     margin-right: 20rpx;
 | |
|   }
 | |
| }
 | |
| .popBtm {
 | |
|   position: sticky;
 | |
|   bottom: 0;
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
|   justify-content: space-between;
 | |
|   background: #fff;
 | |
|   box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 1);
 | |
|   padding: 20rpx 40rpx;
 | |
|   font-size: 14px;
 | |
|   .que {
 | |
|     background: #e03030;
 | |
|     border-radius: 20px;
 | |
|     color: #fff;
 | |
|     text-align: center;
 | |
|     padding: 10rpx 20rpx;
 | |
|   }
 | |
| }
 | |
| </style>
 |