750 lines
		
	
	
		
			20 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			750 lines
		
	
	
		
			20 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <!-- | ||
|  |  * @Descripttion:  | ||
|  |  * @version:  | ||
|  |  * @Author: kBank | ||
|  |  * @Date: 2022-11-21 15:11:22 | ||
|  | --> | ||
|  | <template> | ||
|  |   <view class="content"> | ||
|  |     <!-- <view class="index_header"> | ||
|  | 
 | ||
|  |     </view> --> | ||
|  |    | ||
|  |     <view class="context"> | ||
|  |       <view class="subTxt"> | ||
|  |         <view class="subTxt1">{{$t('MN_F_T_8')}}</view> | ||
|  |       </view> | ||
|  |       <u-form :model="form" | ||
|  |               labelAlign="right" | ||
|  |               labelWidth="75" | ||
|  |               :rules="rules" | ||
|  |               ref="uForm"> | ||
|  |         <view class="kuang"> | ||
|  |           <u-form-item :label="$t('CK_KS_14')" | ||
|  |                        prop="memberName"> | ||
|  |             <u-input :placeholder="$t('w_0060')" | ||
|  |                      v-model.trim="form.memberName" /> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('w_0052')" | ||
|  |                        prop="phone"> | ||
|  |             <u-input :placeholder="$t('w_0053')" type="number" | ||
|  |                      v-model.trim="form.phone"  :maxlength="user.pkSettleCountry == 1?11:20" /> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('PER_DA_3')" | ||
|  |                        @tap="changeCountry(0)"> | ||
|  |             <view class="disFlex justBwn ge"> | ||
|  |               <view class="disFlex"> | ||
|  |                 <img class="countImg" | ||
|  |                      :src="form.pkCountryImg" | ||
|  |                      alt=""> | ||
|  |                 <view>{{ form.pkCountryLabel }}</view> | ||
|  |               </view> | ||
|  |               <u-icon name="arrow-down"></u-icon> | ||
|  |             </view> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('PER_DA_4')"> | ||
|  |             <view class="disFlex justBwn ge hui"> | ||
|  |               <view class="disFlex"> | ||
|  |                 <img class="countImg" | ||
|  |                      :src="form.pkSettleCountryImg" | ||
|  |                      alt=""> | ||
|  |                 <view>{{ form.pkSettleCountryLabel }}</view> | ||
|  |               </view> | ||
|  |               <u-icon name="arrow-down"></u-icon> | ||
|  |             </view> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('MN_F_T_163')"> | ||
|  |             <view class="pickerHui"> | ||
|  |               <u-input v-model="form.transTypeVal" | ||
|  |                        disabled | ||
|  |                        border="none"></u-input> | ||
|  |               <u-icon name="arrow-down"></u-icon> | ||
|  |             </view> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('MN_F_T_140')"> | ||
|  |             <view class="pickerHui"> | ||
|  |               <u-input v-model="form.deliveryName" | ||
|  |                        disabled | ||
|  |                        :placeholder="$t('w_0062')" | ||
|  |                        border="none"></u-input> | ||
|  |               <u-icon name="arrow-down"></u-icon> | ||
|  |             </view> | ||
|  |           </u-form-item> | ||
|  |         </view> | ||
|  |         <view class="subTxt"> | ||
|  |         <view class="subTxt1">收货人信息</view> | ||
|  |       </view> | ||
|  |         <view class="kuang"> | ||
|  |           <view class="disFlex tit_t"> | ||
|  |             <view></view> | ||
|  |             <!-- <view class="lan" @click="addAdress">新增收货人地址</view> --> | ||
|  |           </view> | ||
|  |           <u-form-item :label="$t('MY_ORD_10')" | ||
|  |                        prop="recName"> | ||
|  |             <u-input v-model.trim="form.recName" | ||
|  |                      :placeholder="$t('w_0067')" /> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('w_0242')" | ||
|  |                        prop="recPhone"> | ||
|  |             <u-input v-model.trim="form.recPhone" type="number" maxlength="20" | ||
|  |                      :placeholder="$t('w_0321')" /> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('w_0068')" | ||
|  |                        prop="diqu" | ||
|  |                        @click='getDiqu'> | ||
|  |             <view class="picker"> | ||
|  |               <u-input v-model.trim="form.diqu" | ||
|  |                        :placeholder="$t('w_0322')" | ||
|  |                        border="none"></u-input> | ||
|  |               <u-icon name="arrow-down"></u-icon> | ||
|  |             </view> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('S_C_27')" | ||
|  |                        prop="recAddress"> | ||
|  |             <u--textarea v-model.trim="form.recAddress" | ||
|  |             maxlength="200" | ||
|  |                          :placeholder="$t('w_0070')"></u--textarea> | ||
|  | 
 | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('w_0071')"> | ||
|  |             <u-input disabled | ||
|  |                      v-model="form.postage" /> | ||
|  |           </u-form-item> | ||
|  |           <u-form-item :label="$t('MY_WAL_22')"> | ||
|  |             <u--textarea v-model="form.remark" | ||
|  |                          :placeholder="$t('w_0072')"></u--textarea> | ||
|  |           </u-form-item> | ||
|  |         </view> | ||
|  |       </u-form> | ||
|  |       <!-- <view class="kuang"> | ||
|  |         <view class="kuang_t"> | ||
|  |           <view class="kuang_tl"> | ||
|  |             <view class="sTit">{{$t('w_0323')}}</view> | ||
|  |             <img :src="allData.cover1" | ||
|  |                  alt=""> | ||
|  |             <view class="sTit">{{$t('w_0078')}}</view> | ||
|  |             <view class="cTit">{{ allData.waresName }}</view> | ||
|  |           </view> | ||
|  |           <view class="kuang_tr"> | ||
|  |             <view class="sTit">{{$t('ENU_N_B_T_3')}}</view> | ||
|  |             <view v-for="item,index in allData.specsSkuParamsList" | ||
|  |                   :key="index"> | ||
|  |               <view class="cTit"> | ||
|  |                 {{ item.productName }}{{ item.specsName }}*{{ item.quantity }} | ||
|  |               </view> | ||
|  |             </view> | ||
|  |           </view> | ||
|  |         </view> | ||
|  |         <view class="kuang_t"> | ||
|  |           <view class="kuang_tl"> | ||
|  |             <view class="sTit">{{$t('MN_F_T_1042')}}(¥)</view> | ||
|  |             <view class="cTit">{{ allData.waresPrice | numberToCurrency }}</view> | ||
|  |           </view> | ||
|  |           <view class="kuang_tr"> | ||
|  |             <view class="sTit">{{$t('w_0081')}}</view> | ||
|  |             <view class="cTit">{{ allData.quantity }}</view> | ||
|  |           </view> | ||
|  |         </view> | ||
|  |       </view> --> | ||
|  |       <view class="subTxt"> | ||
|  |         <view class="subTxt1">商品信息</view> | ||
|  |       </view> | ||
|  |       <view class="goodList"> | ||
|  |         <view class="goodList_i"> | ||
|  |           <view class="goodList_it"> | ||
|  |             <img :src="allData.cover1" | ||
|  |                  class="cover" | ||
|  |                  alt=""> | ||
|  |             <view class="goodList_ir"> | ||
|  |               <view class="goodList_ib"> | ||
|  |                 <view class="tit1"> | ||
|  |                   {{ allData.waresName }} | ||
|  |                 </view> | ||
|  |                 <view class="tit5"> | ||
|  |                   x{{ allData.quantity }} | ||
|  |                 </view> | ||
|  |               </view> | ||
|  |               <view class="goodList_ib"> | ||
|  |                 <view class="tit2"> | ||
|  |                   ¥{{ allData.waresPrice | numberToCurrency }} | ||
|  |                 </view> | ||
|  |                 <!-- <view class="tit3">PV: {{ item.achieve | numberToCurrency | isLocal}}</view> --> | ||
|  |               </view> | ||
|  |             </view> | ||
|  |           </view> | ||
|  |           <view v-for="(item,sndex) in allData.specsSkuParamsList" | ||
|  |                 :key="sndex" | ||
|  |                 class="product_i"> | ||
|  |             <img :src="item.cover" | ||
|  |                  alt=""> | ||
|  |             <view class="product_il"> | ||
|  |               <view class="tit4">{{ item.productName }} {{ item.specsName }}</view> | ||
|  |               <view class="tit5">x{{ item.quantity }}</view> | ||
|  |             </view> | ||
|  |           </view> | ||
|  |           <view class="fen"> | ||
|  |             <!-- <view class="disFlex justBwn"> | ||
|  |               <view class="tit3">{{$t('w_0080')}}(PV)</view> | ||
|  |               <view class="tit1">{{ item.achieveAmount | numberToCurrency}}</view> | ||
|  |             </view> --> | ||
|  |             <view class="disFlex justBwn"> | ||
|  |               <view class="tit3">{{$t('w_0093')}}</view> | ||
|  |               <view class="tit1">{{ allData.waresPrice | numberToCurrency}}</view> | ||
|  |             </view> | ||
|  |           </view> | ||
|  |         </view> | ||
|  |       </view> | ||
|  | 
 | ||
|  |      | ||
|  |       <view class="kuang disFlex"> | ||
|  |         <u-checkbox-group v-model="agreementShow" | ||
|  |                           shape="circle" | ||
|  |                           activeColor="#FB3024" | ||
|  |                           @change="checkboxChange"> | ||
|  |           <u-checkbox :name="1"> | ||
|  |           </u-checkbox> | ||
|  |         </u-checkbox-group> | ||
|  |         <view class="tit3">{{$t('w_0207')}}</view> | ||
|  |         <view class="tit2" | ||
|  |               @click="toAgree"> 《{{$t('w_0208')}}》</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">{{$t('w_0325')}}</view> | ||
|  |             <view class="r1">¥{{ allData.waresPrice  | numberToCurrency}}</view> | ||
|  |           </view> | ||
|  |           <!-- <view class="disFlex"> | ||
|  |             <view class="h1">{{$t('ENU_TOTAL_V_1')}}</view> | ||
|  |             <view class="l1">¥{{ achiveAmount | numberToCurrency}}</view> | ||
|  |           </view> --> | ||
|  |         </view> | ||
|  |         <view class="footer_r"> | ||
|  |           <u-button type="success" | ||
|  |                     class="uBtn" | ||
|  |                     shape="circle" | ||
|  |                     :loading="isLoading" | ||
|  |                     :loadingText="$t('w_0313')" | ||
|  |                     @tap="goBuy" | ||
|  |                     color="linear-gradient(to right, #fb3024, #fb3024 )">{{$t('w_0163')}} </u-button> | ||
|  | 
 | ||
|  |         </view> | ||
|  |       </view> | ||
|  |     </view> | ||
|  |     <!-- 选择国家 --> | ||
|  |     <u-picker :show="isCountry" | ||
|  |               @cancel='isCountry=false' | ||
|  |               @confirm="sureCountry" | ||
|  |               :columns="countryList" | ||
|  |               keyName="label"></u-picker> | ||
|  |     <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 * as regiest from '@/config/regiest' | ||
|  | 
 | ||
|  | import agreement from '@/components/agreement.vue' | ||
|  | export default { | ||
|  |   components: { | ||
|  |     'v-address': address, | ||
|  |     agreement, | ||
|  |   }, | ||
|  |   data() { | ||
|  |     return { | ||
|  |       specialArea: 7, | ||
|  |       isCountry: false, | ||
|  |       defaultCode: [], | ||
|  |       form: { | ||
|  |         deliveryName: this.$t('ENU_DELIVERY_1'), | ||
|  |         deliveryWay: 1, | ||
|  |         postage: 0, | ||
|  |         transType: 1, | ||
|  |         transTypeVal: this.$t('ENU_TRA_1'), | ||
|  |         pkSettleCountry: '', | ||
|  |         pkSettleCountryLabel: '', | ||
|  |         pkSettleCountryImg: '', | ||
|  |         pkCountry: '', | ||
|  |         pkCountryLabel: '', | ||
|  |         pkCountryImg: '', | ||
|  |       }, | ||
|  |       deliList: [], | ||
|  |       diqu: '', | ||
|  |       allData: [], | ||
|  |       goodsNum: 1, | ||
|  |       agreementShow: [], | ||
|  |       priceAmount: 0, //商品总价
 | ||
|  |       achiveAmount: 0, //总业绩
 | ||
|  |       totalMont: 0, | ||
|  |       waresList: [], | ||
|  |       isLoading: false, | ||
|  |       centerCodeId: '', | ||
|  |       rules: { | ||
|  |         memberName: [ | ||
|  |           { | ||
|  |             required: true, | ||
|  |             message: this.$t('w_0060'), | ||
|  |             trigger: ['blur'], | ||
|  |           }, | ||
|  |         ], | ||
|  |         phone: [{ validator: this.phonePass, trigger: ['blur'] }], | ||
|  |         recName: [ | ||
|  |           { | ||
|  |             required: true, | ||
|  |             message: this.$t('w_0067'), | ||
|  |             trigger: ['change', 'blur'], | ||
|  |           }, | ||
|  |         ], | ||
|  |         recPhone: [ | ||
|  |           { | ||
|  |             required: true, | ||
|  |             message: this.$t('w_0321'), | ||
|  |             trigger: ['change', 'blur'], | ||
|  |           }, | ||
|  |           { | ||
|  | 						min: 6,  | ||
|  | 						message: this.$t('w_0279'),  | ||
|  | 						trigger: 'blur' | ||
|  | 					}, | ||
|  |           { | ||
|  | 						max: 20,  | ||
|  | 						message:this.$t('w_0279'),  | ||
|  | 						trigger: 'blur' | ||
|  | 					}, | ||
|  |         ], | ||
|  |         diqu: [ | ||
|  |           { | ||
|  |             required: true, | ||
|  |             message: this.$t('w_0069'), | ||
|  |             trigger: ['change', 'blur'], | ||
|  |           }, | ||
|  |         ], | ||
|  |         recAddress: [ | ||
|  |           { | ||
|  |             required: true, | ||
|  |             message: this.$t('w_0070'), | ||
|  |             trigger: ['change', 'blur'], | ||
|  |           }, | ||
|  |         ], | ||
|  |       }, | ||
|  |       countryList: [], | ||
|  |       placeParent:'', | ||
|  |       user:'' | ||
|  |     } | ||
|  |   }, | ||
|  |   onLoad(options) { | ||
|  |     this.user = uni.getStorageSync('User') | ||
|  |     this.centerCodeId =  this.user.memberCode | ||
|  |     this.pkCountry = 1 | ||
|  |     this.allData = JSON.parse(options.allData) | ||
|  |     console.log('%c [ this.allData ]-336', 'font-size:13px; background:#f67b85; color:#ffbfc9;', this.allData) | ||
|  |     this.placeParent = uni.getStorageSync('placeParent') | ||
|  |     this.allData.quantity = 1 | ||
|  |     this.setGoodlistType() | ||
|  |     this.getGenerate() | ||
|  |     this.getCountry() | ||
|  |     // 发货方式
 | ||
|  |     // this.getDeliveryList()
 | ||
|  |   }, | ||
|  |   onShow() {}, | ||
|  |   methods: { | ||
|  |     phonePass(rule, value, callback) { | ||
|  |       if (!value) { | ||
|  |         callback(new Error(this.$t('w_0278'))) | ||
|  |         return false | ||
|  |       } | ||
|  |       if(value.length<6||value.length>20){ | ||
|  |         callback(new Error(this.$t('w_0204'))) | ||
|  |         return false | ||
|  |       }else{ | ||
|  |         regiest | ||
|  |         .validPhone({ | ||
|  |           memberName: this.form.memberName, | ||
|  |           phone: this.form.phone, | ||
|  |           placeParent: this.placeParent, | ||
|  |         }) | ||
|  |         .then((res) => { | ||
|  |           if (res.code == 200) { | ||
|  |             callback() | ||
|  |           } else { | ||
|  |             callback(new Error(res.msg)) | ||
|  |           } | ||
|  |         }) | ||
|  |       } | ||
|  |   | ||
|  |     }, | ||
|  |     getCountry() { | ||
|  |       regiest.countryList().then((res) => { | ||
|  |         let data = res.data.map((item) => { | ||
|  |           return { | ||
|  |             img: item.nationalFlag2, | ||
|  |             id: item.pkId, | ||
|  |             label: item.shortName, | ||
|  |           } | ||
|  |         }) | ||
|  |         this.countryList = [data] | ||
|  |         this.countryList[0].forEach((item) => { | ||
|  |           if (item.id == this.pkCountry) { | ||
|  |             this.form.pkSettleCountry = item.id | ||
|  |             this.form.pkSettleCountryLabel = item.label | ||
|  |             this.form.pkSettleCountryImg = item.img | ||
|  |             this.form.pkCountry = item.id | ||
|  |             this.form.pkCountryLabel = item.label | ||
|  |             this.form.pkCountryImg = item.img | ||
|  |           } | ||
|  |           // if (item.id == this.userInfo.pkCountry) {
 | ||
|  |           //     this.form.pkCountry = item.id
 | ||
|  |           //     this.form.pkCountryLabel = item.label
 | ||
|  |           //     this.form.pkCountryImg = item.img
 | ||
|  |           // }
 | ||
|  |         }) | ||
|  |       }) | ||
|  |     }, | ||
|  |     changeCountry(index) { | ||
|  |       this.isCountry = true | ||
|  |       this.countryIndex = index | ||
|  |     }, | ||
|  |     sureCountry(e) { | ||
|  |       console.log('%c [ e ]-418', 'font-size:13px; background:#b131b9; color:#f575fd;', e) | ||
|  |       const { value } = e | ||
|  |       this.form.pkCountry = value[0].id | ||
|  |       this.form.pkCountryLabel = value[0].label | ||
|  |       this.form.pkCountryImg = value[0].img | ||
|  |       this.isCountry = false | ||
|  |     }, | ||
|  |     // addAdress() {
 | ||
|  |     //   uni.navigateTo({
 | ||
|  |     //     url: '/pages/address/index',
 | ||
|  |     //   })
 | ||
|  |     // },
 | ||
|  |     toAgree() { | ||
|  |       // agreeMent
 | ||
|  |       this.$refs.agreement.openDig() | ||
|  |     }, | ||
|  |     getGenerate() { | ||
|  |       api.generate().then((res) => { | ||
|  |         uni.setStorageSync('mToken', res.msg) | ||
|  |       }) | ||
|  |     }, | ||
|  |     goBuy() { | ||
|  |       this.$refs.uForm.validate().then((res) => { | ||
|  |         if (this.agreementShow.length == 0) { | ||
|  |           uni.showToast({ | ||
|  |             title: this.$t('w_0091'), | ||
|  |             icon: 'none', | ||
|  |             duration: 1500, | ||
|  |           }) | ||
|  |           return | ||
|  |         } | ||
|  |         this.isLoading = true | ||
|  |         api | ||
|  |           .fansConfirm( | ||
|  |             Object.assign({}, this.form, { | ||
|  |               waresList: this.waresList, | ||
|  |             }) | ||
|  |           ) | ||
|  |           .then((res) => { | ||
|  |             this.isLoading = false | ||
|  |             if (res.code == 200) { | ||
|  |               uni.navigateTo({ | ||
|  |                 url: '/pages/pay/hiPay?paramsPost=' + JSON.stringify(res.data), | ||
|  |               }) | ||
|  |             } | ||
|  |           }) | ||
|  |       }) | ||
|  |     }, | ||
|  |     setGoodlistType() { | ||
|  |       let carList = { | ||
|  |         quantity: 1, | ||
|  |         pkWares: this.allData.pkId, | ||
|  |         skuList: [], | ||
|  |       } | ||
|  |       this.allData.specsSkuParamsList.forEach((item) => { | ||
|  |         carList.skuList.push({ | ||
|  |           pkWaresSku: item.pkWaresSpecsSku, | ||
|  |           quantity: item.quantity, | ||
|  |         }) | ||
|  |       }) | ||
|  |       this.waresList = [carList] | ||
|  |     }, | ||
|  |     checkboxChange() {}, | ||
|  |     getDiqu() { | ||
|  |       this.$refs.address.setShow() | ||
|  |     }, | ||
|  |     confirmPopup() {}, | ||
|  |     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: #fb3024; | ||
|  | } | ||
|  | .tit3 { | ||
|  |   font-size: 26rpx; | ||
|  |   font-family: Source Han Sans CN; | ||
|  |   font-weight: 400; | ||
|  |   color: #333; | ||
|  | } | ||
|  | .justBwn { | ||
|  |   width: 100%; | ||
|  |   justify-content: space-between; | ||
|  | } | ||
|  | .countImg { | ||
|  |   width: 62rpx; | ||
|  |   height: 41rpx; | ||
|  |   margin-right: 20rpx; | ||
|  | } | ||
|  | .ge { | ||
|  |   padding: 6px 9px; | ||
|  |   border: 0.5px solid #dadbde; | ||
|  |   border-radius: 4px; | ||
|  |   font-size: 16px; | ||
|  | } | ||
|  | .hui { | ||
|  |   background: #f5f7fa; | ||
|  | } | ||
|  | .subTxt { | ||
|  |   background: #fb3024; | ||
|  |   font-size: 28rpx; | ||
|  |   font-family: Source Han Sans CN; | ||
|  |   font-weight: bold; | ||
|  |   color: #fff; | ||
|  |   padding: 35rpx 27rpx; | ||
|  |   display: flex; | ||
|  |   align-items: center; | ||
|  |   justify-content: space-between; | ||
|  |   .subTxt1 { | ||
|  |     border-left: 4px solid #fff; | ||
|  |     padding: 0 20rpx; | ||
|  |   } | ||
|  |   .subTxt2 { | ||
|  |     display: flex; | ||
|  |     align-items: center; | ||
|  |     view { | ||
|  |       margin-left: 20rpx; | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | .goodList { | ||
|  |   display: flex; | ||
|  |   padding: 20rpx; | ||
|  |   border-bottom: 1px solid #eee; | ||
|  |   background: #fff; | ||
|  | } | ||
|  | .cover { | ||
|  |   width: 136rpx; | ||
|  |   height: 136rpx; | ||
|  |   background: #ffffff; | ||
|  |   border: 1px solid #eeeeee; | ||
|  |   border-radius: 10rpx; | ||
|  | } | ||
|  | .goodList_i { | ||
|  |   flex: 1; | ||
|  | } | ||
|  | .goodList_it { | ||
|  |   display: flex; | ||
|  |   padding: 0rpx 0 20rpx 0rpx; | ||
|  | 
 | ||
|  |   .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; | ||
|  |       } | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | .product_i { | ||
|  |   display: flex; | ||
|  |   align-items: center; | ||
|  |   background: #F6F6F6; | ||
|  |   padding: 28rpx; | ||
|  |   .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; | ||
|  |   } | ||
|  | } | ||
|  | .fen { | ||
|  |   background: #F6F6F6; | ||
|  |   padding: 0 28rpx 28rpx 28rpx; | ||
|  | } | ||
|  | </style> |