Adam / gulu-vue

Browse Code »

Commit 4ee9880a463061fe600eeb4f226a902875bdd60a

Authored by 范牧 2020-06-08 11:19:30 +0800

2 parents 5bca13074e 37f3387c9a

Exists in master

解决冲突

Showing 14 changed files Show diff stats

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @4ee9880

 <template>
 	<view class="BottomSheetContent">
 		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @touchmove.stop.prevent="moveHandle"  @click="closeSheet()">
 			<scroll-view scroll-y="true"  class="sheetView"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
 				<view class="BottomSheetContent">
 				  <view class="goodInfo">
 				    <view class="imageWrap">
 				      <image
 				        :src="skuItem.pic"
 				        mode="aspectFill"
 				        style="width: 188rpx;height: 168rpx;"
 				      ></image>
 				    </view>
 				    <view class="infoRight">
 				      <text class="goodName">{{goodInfo.p_name}}</text>
 				      <text class="remarks">支持7天无理由退货  顺丰发货</text>
 				      <view class="priceBox">
 				        <view class="price">￥{{skuItem.real_price || '暂无'}}</view>
 				        <text>(限购{{maxCount}}副)</text>
 				        <view class="counter">
 				          <view
 				            class="btn"
 				            disabled="this.addDisabled"
 				            type="default"
 				            @click="counter(false)"
 				          >-</view>
 				          <text>{{count}}</text>
 				          <view
 				            class="btn"
 				            disabled="this.desDisabled"
 				            type="default"
 				            @click="counter(true)"
 				          >+</view>
 				        </view>
 				      </view>
 				    </view>
 				  </view>
 				  <view class="peopleChoose">
 					  <view class="title">选择使用人</view>
 					  <view class="loveList">
 					  	<view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
 				                @click="onClickLoveItem(index,item.name)">
 					  		{{item.name}}
 					  	</view>
 					  </view>
 				  </view>
 				  <view class="goods-data" v-if="isCart !== 3">
 				    <view class="opCollapse">
 				      <view class="body">
 				        <template v-if="opIsOpen">
 				    <view class="goods-form">
 				      <view class="p1">
 				        <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
 				        填写验光数据
 				      </view>
 				      <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
 				      <view class="picker">
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="pd">验光单取名:</text>
 				          </view>
 				          <input type="text" @blur="handleInput" class="input"
 				          placeholder="请输入名称" maxlength="20" :value="name" />
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[0].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[0].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
 				          <picker  @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
 				            <view class="p14">
 				            {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
 				            <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
 				            <view class="p14">
 				            {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
 				            <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[1].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[1].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
 				          <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
 				            <view class="p14">
 				              {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
 				            <view class="p14">
 				              {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[2].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[2].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
 				            <view class="p14">
 				              {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
 				            <view class="p14">
 				              {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker">
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="pd">瞳距:</text>
 				          </view>
 				          <input type="digit" @change="handleInputPd" class="input"
 				          placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[3].nameC}}</text>
 				          </view>
 				          <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
 				          <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
 				          <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
 				          <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
 				              <image src="../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="confirm">
 				        <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
 				        <text>确认以上输入信息来源于我的验光数据!</text>
 				      </view>
 				    </view>
 				        </template>
 				        <template v-else>
 				          <view
 				            v-for="item in pickerInfoList"
 				            :key="item.key"
 				            class="bodyBox"
 				          >
 				            <template v-if="item.nameC==='验光日期'">
 				              <text class="names">{{item.nameC}}</text>
 				              <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
 				              <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
 				              <text>{{item.nameArray3[item.nameIndex2]}}日</text>
 				            </template>
 				            <template v-else>
 				              <template v-if="item.nameC==='度数'">
 				                <text style="display: inline;">*</text>
 				              </template>
 				              <text class="names">{{item.nameC}}</text>
 				              <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
 				              <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
 				            </template>
 				          </view>
 				        </template>
 				      </view>
 				    </view>
 				  </view>
 				  <view class="choose">
 				    <view
 				      class="chooseItem_1_content"
 				      v-for="(item,index) in attrList"
 				      :key="index"
 				    >
 				      <UniCollapse @change="changeShow(index)">
 				        <UniCollapseItem
 				          :open="show[index]"
 				          :title="item.meta_name"
 				          showAnimation=false
 				        >
 				          <view class="chooseItem_1_content">
 				            <view class="itemsWrap" 	v-if="isCart ==3">
 				              <view
 				                class="item2"
 				                v-for="(one,i) in item.attr"
 				                :key="i"
 				                :class="{ active2: current[index] === i}"
 				                @click="cartOnClickItem(index, i,one.aid)"
 				              >{{one.name}}</view>
 				            </view>
 							<view class="itemsWrap" 	v-else>
 							  <view
 							    class="item2"
 							    v-for="(one,i) in item.attr"
 							    :key="i"
 							    :class="{ active2: current[index] === i }"
 							    @click="cartOnClickItem(index, i,one.aid)"
 							  >{{one.name}}</view>
 							</view>
 				          </view>
 				        </UniCollapseItem>
 				      </UniCollapse>
 				      <view
 				        class="chooseRes"
 				        v-show="!show[index]"
 				      >* {{attrList[index].attr[current[index]].name}}</view>
 				    </view>
 				  </view>
 				  <view
 				    class="button"
 				    @click.native="addCart"
 					v-if="isCart == 1"
 				  >
 				    加入购物车
 				  </view>
 				  <view
 				    class="button"
 				    @click="toComfirmOrder"
 					v-if="isCart == 2"
 				  >
 				    立即结算
 				  </view>
 				  <view
 				    class="button"
 				    @click="comfirmChoose"
 				  	v-if="isCart == 3"
 				  >
 				    确定
 				  </view>
 				</view>
 			</scroll-view>
 		</view>
 	</view>
 </template>
 <script>
 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
 import store from '@/store'
 	export default {
 		components: {
 			UniCollapse,
 			UniCollapseItem,
 		},
 		props: {
 			isShowBottom : Boolean,
 			pid: Number,
 			sk_id:String,
 			propMpId:String,
 			goodInfo:Object,
 			isCart:Number,
 			cart_id:Number,
 			index:Number
 		},
 		data() {
 		  return {
 			loveCurrent:Number,
 		    count: 1,
 		    // pid: 0,
 		    maxCount: 20,
 		    dataName: '', // 验光数据人员名称
 		    isDataName: false, // 是否是已存在的人员数据
 		    dataConfirm: false, // 已确认所输入验光数据
 		    opIsOpen: true,
 		    addDisabled: false,
 		    desDisabled: false,
 		    current: [],
 		    show: [true,true],
 		    checkedData: {},
 		    // 度数相关数据
 		    pickerInfoList: [
 		      { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
 		      { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
 		      { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
 		      { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
 		    ],
 		    confirm: false, // 用户是否确认
 		    tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
 		    name: '',
 		    oldname: '', // 用于判读用户是否改变名字
 		    pickerInfoChioce: {
 		      leftSph: '',
 		      rightSph: '',
 		      leftCyl: '',
 		      rightCyl: '',
 		      leftAxi: '',
 		      rightAxi: '',
 		      time: {
 		        year: 0,
 		        month: 0,
 		        day: 0,
 		      },
 		    },
 		    pd: '', // 瞳距
 		    oldpd: '', // 用于判断用户是否改变瞳距
 		    kinds: 1, // kinds=1，提交为新增验光，2为修改
 		    mp_id: Number,
 			skuValueArray:[],
 			skId:String
 		  }
 		},
 		computed: {
 			//进购物车选择的人的index
 			p_current(){
 					const getLoveItemIndex = (item) => item.mp_id == this.propMpId
 					const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex )
 					if(this.isCart == 3){
 						this.loveCurrent = p_current
 					}
 					return p_current
 			},
 			arr_current(){
 				if(this.isCart == 3){
 					const skId = this.sk_id
 					const skuValue = this.skuItem.sku_value
 					const skuValueArray = skuValue.split('_')
 					this.skuValueArray = skuValueArray
 					const attrList = this.$store.state.read.goodInfo.attrList
 					for (let i = 0;i<attrList.length;i++) {
 						const getArrIndex = (item) => item.aid == skuValueArray[i]
 						const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex )
 						// console.log('arr_current',arr_current)
 						this.current.push(arr_current)
 					}
 				}else{
 					return null
 				}
 			},
 			loveList() {
 				return this.$store.state.myLoveList.loveList || []
 			},
 		  attrList() {
 			  // console.log('attrList',this.$store.state.read.goodInfo.attrList)
 			  let attrList =  this.$store.state.read.goodInfo.attrList
 			  if(attrList !== undefined){
 				return attrList
 			  }else{
 				  return []
 			  }
 		  },
 		  skuList() {
 			  // console.log('skuList',this.$store.state.read.goodInfo.skuList)
 		    return this.$store.state.read.goodInfo.skuList
 		  },
 		  skuItem(){
 			  // if(this.isCart == 3){
 				  const skuList =  this.$store.state.read.goodInfo.skuList
 				  const skuItem = skuList.filter(item => item.sk_id === this.skId)[0]
 				  return skuItem
 			  // }else{
 				 //  const skuList =  this.$store.state.read.goodInfo.skuList
 				 //  const skuItem = skuList[0]
 				 //  return skuItem
 			  // }
 		  },
 		  mpList() {
 		    return this.$store.state.myLoveList.loveList
 		  },
 		},
 		created() {
 			this.skuValueArray = this.skuList[0].sku_value.split("_")
 			// console.log(this.sk_id)
 			this.mp_id = this.propMpId
 		  const pid = this.pid
 		  if(this.isCart!==3){
 			this.skId = this.skuList[0].sk_id
 			const current = []
 			const show = []
 			for (let index = 0; index < this.attrList.length; index++) {
 			  current.push(0)
 			  show.push(true)
 			}
 			this.current = current
 			this.show = show
 		  }else{
 			this.skId = this.sk_id
 		  }
 		  	//获取关心的人列表
 		  	store.dispatch('myLoveList/getLoveList', {
 		  		uid: this.$store.state.user.userInfo.uid,
 		  	});
 		  // 初始化SPL、CYL、AXI的值
 		  for (let j = 0; j < 3; j++) {
 		    for (let i = -12; i < 6; i++) {
 		      this.pickerInfoList[j].nameArray1.push(i)
 		      this.pickerInfoList[j].nameArray1.push(i + 0.5)
 		      this.pickerInfoList[j].nameArray2.push(i)
 		      this.pickerInfoList[j].nameArray2.push(i + 0.5)
 		      if (i >= -6) {
 		        this.pickerInfoList[j].nameArray1.push(i + 0.25)
 		        this.pickerInfoList[j].nameArray1.push(i + 0.75)
 		        this.pickerInfoList[j].nameArray2.push(i + 0.25)
 		        this.pickerInfoList[j].nameArray2.push(i + 0.75)
 		      }
 		      if (i === 5) {
 		        this.pickerInfoList[j].nameArray1.push(i + 1)
 		        this.pickerInfoList[j].nameArray2.push(i + 1)
 		      }
 		    }
 		  }
 		  // 初始化日期值
 		  for (let i = 1; i < 32; i++) {
 		    this.pickerInfoList[3].nameArray3.push(i)
 		  }
 		  // 初始化年份前后五年
 		  const myDate = new Date()
 		  const nowYear = myDate.getFullYear()
 		  for (let i = 0; i < 5; i++) {
 		    this.pickerInfoList[3].nameArray1.push(nowYear - i)
 		  }
 		},
 		name : "bottomSheet",
 		methods: {
 			//参数点击事件==》改变对应图片
 			cartOnClickItem(index, i,aid) {
 				//根据aid拼接skuValue
 				this.skuValueArray[index] = aid
 				const sku_value = this.skuValueArray.join('_')
 				//根据sku_value获取对应的sk_id
 				const itemSk_id =  this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id
 				//修改sk_id
 				this.skId = itemSk_id
 			  if (this.current[index] !== i) {
 			    this.current[index] = i
 			  }
 			  this.$forceUpdate()
 			},
 			comfirmChoose(){
 				const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price
 				this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车
 				this.$emit("closeBottom")
 			},
 			addCart(){
 				const that = this
 				const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
 				const checkedSKU = []
 				let j;
 				for (let i = 0;i<that.current.length;i++) {
 					checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
 					// console.log('i', i, j, i !== this.current.length - 1)
 					  if (i !== this.current.length - 1) {
 					    // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
 					    j = this.current[i] * this.attrList[1].attr.length
 					  } else {
 					    j += this.current[i]
 					  }
 				}
 				let sk_id = this.skuList[j].sk_id
 				console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
 				this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id)//添加购物车
 				this.$emit("closeBottom")//关闭弹窗
 			},
 			onClickLoveItem(index,name){
 				const loveList = this.loveList
 				for (let index = 0; index < loveList.length; index++) {
 				  if (name === loveList[index].name && name!==this.name) {
 				    this.isDataName = true
 				          this.kinds = 2
 				          this.name = loveList[index].name
 				          this.pd = loveList[index].pd
 				          this.mp_id = loveList[index].mp_id
 				          this.oldname = loveList[index].name
 				          this.oldpd = loveList[index].pd
 				          this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
 				          this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
 				          this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
 				          this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
 				          this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
 				          this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
 				          this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
 				          if (loveList[index].in_time.toString().slice(5, 6) === 0) {
 				            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
 				          } else {
 				            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
 				          }
 				          if (loveList[index].in_time.toString().slice(8, 9) === 0) {
 				            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
 				          } else {
 				            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
 				          }
 				  }
 				}
 					this.name = name;
 					this.loveCurrent = index;
 			},
 			closeSheet(){
 				this.$emit('closeBottom');
 			},
 			stopEvent(){						//@click.stop防止事件冒泡
 			},
 			moveHandle(){						//不让页面滚动
 			},
 			// picker相关功能
 			handleInput(e) {
 			  this.name = e.target.value
 			  this.isDataName = false
 			  const mpList = this.mpList
 			  // console.log('mpList===>', mpList)
 			  for (let index = 0; index < mpList.length; index++) {
 			    if (e.detail.value === mpList[index].name) {
 			      this.isDataName = true
 			      uni.showModal({
 			        title: '提示',
 			        content: `是否填充已有的"${e.detail.value}"的数据`,
 			        success: (res) => {
 			          if (res.confirm) {
 			            this.kinds = 2
 			            // console.log('args===>', index)
 			            // const mpList=Object.assign({},this.$store.state.mympList.mpList)
 			            this.name = mpList[index].name
 			            this.pd = mpList[index].pd
 			            this.mp_id = mpList[index].mp_id
 			            this.oldname = mpList[index].name
 			            this.oldpd = mpList[index].pd
 			            // 将kinds =2时的值传到该页面
 			            this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
 			            this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
 			            this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
 			            this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
 			            this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
 			            this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
 			            this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
 			            if (mpList[index].in_time.toString().slice(5, 6) === 0) {
 			              this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
 			            } else {
 			              this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
 			            }
 			            if (mpList[index].in_time.toString().slice(8, 9) === 0) {
 			              this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
 			            } else {
 			              this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
 			            }
 			          // this.checkedData = mpList[index]
 			          // console.log('checkedData', this.checkedData)
 			          } else if (res.cancel) {
 			            this.kinds = 2
 			          }
 			        },
 			      })
 			    }
 			  }
 			},
 			handleInputPd(e) {
 			  // 只能输入正浮点数或正数
 			  if (/^\d+(\.\d+)?$/.test(e.target.value)) {
 			    this.pd = e.target.value
 			  } else {
 			    uni.showToast({
 			      title: '请输入有效数据;示例:89',
 			      icon: 'none',
 			      duration: 2000,
 			    })
 			    this.pd = ''
 			  }
 			},
 			changeConfirm() {
 			  this.confirm = !this.confirm
 			},
 			bindPickerChange01: function(e) {
 			  this.pickerInfoList[0].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
 			},
 			bindPickerChange02: function(e) {
 			  this.pickerInfoList[0].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
 			},
 			bindPickerChange11: function(e) {
 			  this.pickerInfoList[1].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
 			},
 			bindPickerChange12: function(e) {
 			  this.pickerInfoList[1].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
 			},
 			bindPickerChange21: function(e) {
 			  this.pickerInfoList[2].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
 			},
 			bindPickerChange22: function(e) {
 			  this.pickerInfoList[2].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
 			},
 			bindPickerChange41: function(e) {
 			  this.pickerInfoList[3].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
 			},
 			bindPickerChange42: function(e) {
 			  this.pickerInfoList[3].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
 			},
 			bindPickerChange43: function(e) {
 			  this.pickerInfoList[3].nameIndex3 = e.target.value
 			  this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
 			},
 			changeShow(num) {
 			  this.show[num] = !this.show[num]
 			  this.$forceUpdate()
 			},
 			counter(isadd) {
 			  if (isadd) {
 			    this.count >= this.maxCount ? this.addDisabled = true : this.count++
 			  } else {
 			    this.count <= 1 ? this.desDisabled = true : this.count--
 			  }
 			},
 			toComfirmOrder() {
 			  // 先处理验光部分的逻辑，如果ok在跳转
 			  let flag = 0
 			  if (this.name === '') {
 			    uni.showToast({
 			      title: '请输入验光单取名',
 			      icon: 'none',
 			      duration: 2000,
 			    })
 			  } else {
 			    if (this.pd === '') {
 			      uni.showToast({
 			        title: '请输入瞳距',
 			        icon: 'none',
 			        duration: 2000,
 			      })
 			    } else {
 			      if (this.kinds === 1) {
 			        // 添加用户验光单
 			        console.log('kinds====>', this.pickerInfoChioce.leftSph)
 			        console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
 			        console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
 			        if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
 			        this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
 			        this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
 			        ) {
 			          uni.showToast({
 			            title: '请输入您的验光数据',
 			            icon: 'none',
 			            duration: 2000,
 			          })
 			        } else {
 			          if (this.confirm) {
 			            store.dispatch('myLoveList/addMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              // mp_name: this.$store.state.user.userInfo.mp_name,
 			              leftSph: this.pickerInfoChioce.leftSph,
 			              rightSph: this.pickerInfoChioce.rightSph,
 			              leftCyl: this.pickerInfoChioce.leftCyl,
 			              rightCyl: this.pickerInfoChioce.rightCyl,
 			              leftAxi: this.pickerInfoChioce.leftAxi,
 			              rightAxi: this.pickerInfoChioce.rightAxi,
 			              pd: this.pd, // 瞳距
 			              mp_name: this.name,
 			            // time: this.pickerInfoChioce.time,
 			            // img_url2: "http://localhost:8087/images/shop_1/1/",
 			            }).then(({ mp_id: mpId }) => {
 			              this.mp_id = mpId
 			            })
 			            flag = 1
 			          } else {
 			            uni.showToast({
 			              title: '请确认您的验光数据',
 			              icon: 'none',
 			              duration: 3000,
 			            })
 			          }
 			        }
 			      }
 			      if (this.kinds === 2) {
 			        if (this.confirm) {
 			          const leftList = ['leftSph', 'leftCyl', 'leftAxi']
 			          const rightList = ['rightSph', 'rightCyl', 'rightAxi']
 			          // let flag=0;
 			          if (this.name !== this.oldname) {
 			            store.dispatch('myLoveList/updateMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              mp_id: this.mp_id,
 			              keyname: 'name',
 			              keyvalue: this.name,
 			            })
 			            flag = 1
 			          }
 			          if (this.pd !== this.oldpd) {
 			            store.dispatch('myLoveList/updateMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              mp_id: this.mp_id,
 			              keyname: 'pd',
 			              keyvalue: this.pd,
 			            })
 			            flag = 1
 			          }
 			          //  先验证是否输入有无空
 			          let q = true
 			          for (let k = 0; k < 3; k++) {
 			            q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
 			            this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
 			          }
 			          if (q) {
 			            for (let j = 0; j < 3; j++) {
 			              if (this.pickerInfoList[j].nameIndex1 !== 0) {
 			                store.dispatch('myLoveList/updateMylove', {
 			                  uid: this.$store.state.user.userInfo.uid,
 			                  openid: this.$store.state.user.userInfo.openid,
 			                  mp_id: this.mp_id,
 			                  keyname: leftList[j],
 			                  keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
 			                })
 			              }
 			              if (this.pickerInfoList[j].nameIndex2 !== 0) {
 			                store.dispatch('myLoveList/updateMylove', {
 			                  uid: this.$store.state.user.userInfo.uid,
 			                  openid: this.$store.state.user.userInfo.openid,
 			                  mp_id: this.mp_id,
 			                  keyname: rightList[j],
 			                  keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
 			                })
 			              }
 			              flag = 1
 			            }
 			          } else {
 			            flag = 0
 			            uni.showToast({
 			              title: '请输入您的验光数据',
 			              icon: 'none',
 			              duration: 2000,
 			            })
 			          }
 			          if (flag !== 0) {
 			            store.dispatch('myLoveList/getLoveList', {
 			              uid: this.$store.state.user.userInfo.uid,
 			            })
 			          }
 			        } else {
 			          uni.showToast({
 			            title: '请确认您的验光数据',
 			            icon: 'none',
 			            duration: 3000,
 			          })
 			        }
 			      }
 			    }
 			  }
 			  if (flag !== 0) {
 			    // 如果数据验证无误，那么更新验光单的数据
 			    store.dispatch('myLoveList/getLoveList', {
 			      uid: this.$store.state.user.userInfo.uid,
 			    })
 			    let i = 0
 			    // 判断出是哪一个sku被选中
 			    for (let index = 0; index < this.current.length; index++) {
 			      // console.log('index', index, i, index !== this.current.length - 1)
 			      if (index !== this.current.length - 1) {
 			        // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
 			        i = this.current[index] * this.attrList[1].attr.length
 			      } else {
 			        i += this.current[index]
 			      }
 			    }
 			    // 判断是否其输入的人员数据是否已存在
 			    store.dispatch('order/saveParams', {
 			      sk_id_arr: this.skuList[i],
 			      current: this.current,
 			      mp_id: this.mp_id,
 			      attrList: this.attrList,
 			    })
+				this.$store.state.cart.buyItem = this.skuItem
 			    // 跳转到确认订单页面
 			    uni.navigateTo({
-			      url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
+			      url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`,
 			    })
 			  }
 			},
 		}
 	}
 </script>
 <style lang="scss">
 	.BottomSheetContent {
 	  min-height: 100vh;
 	  background-color: #f2f2f2;
 	  // padding-top: 20rpx;
 	  .goodInfo {
 	    width: 100%;
 	    height: 272rpx;
 	    border-radius: 16rpx;
 	    background-color: #ffffff;
 	    box-sizing: border-box;
 	    padding: 36rpx;
 	    display: flex;
 	    flex-direction: row;
 	    justify-content: flex-start;
 		position: sticky;
 		top: 0rpx;
 		left: 0rpx;
 		z-index: 99999;
 	    .imageWrap {
 	      height: 188rpx;
 	      width: 188rpx;
 	      margin-right: 28rpx;
 	      image {
 	        height: 188rpx;
 	        width: 188rpx;
 	      }
 	    }
 	    .infoRight {
 	      display: flex;
 	      flex-direction: column;
 	      align-items: flex-start;
 	      justify-content: space-between;
 		  width: 100%;
 	      .goodName {
 	        font-size: 28rpx;
 	        color: #333333;
 	      }
 	      .remarks {
 	        font-size: 20rpx;
 	        color: #999999;
 	      }
 	      .priceBox {
 	        display: flex;
 	        justify-content: space-between;
 	        align-items: center;
 	        width: 100%;
 	        font-size: 14px;
 	        color: #999999;
 	        .price {
 	          color: #ff6b4a;
 	          font-size: 28rpx;
 	        }
 	        .counter {
 	          display: flex;
 	          flex-direction: row;
 	          justify-content: space-between;
 	          align-items: center;
 	          font-size: 28rpx;
 	          color: #333333;
 	          width: 122rpx;
 	          .btn {
 	            display: flex;
 	            justify-content: center;
 	            line-height: 32rpx;
 	            height: 32rpx;
 	            width: 32rpx;
 	            background-color: #f2f2f2;
 	            color: #cfcfcf;
 	          }
 	        }
 	      }
 	    }
 	  }
 	  .peopleChoose{
 		    width: 100%;
 		    min-height: 200rpx;
 		    border-radius: 16rpx;
 		    background-color: #ffffff;
 		    box-sizing: border-box;
 		    padding: 36rpx;
 			margin: 10px 0;
 		    display: flex;
 		    flex-direction: column;
 		    justify-content: flex-start;
 			align-items: center;
 			.title{
 				font-size: 16px;
 				color: #333333;
 				letter-spacing: -0.3px;
 				text-align: justify;
 				line-height: 24px;
 				margin: 4px 0;
 			}
 			.loveList{
 				display: flex;
 				flex-direction: row;
 				flex-wrap: wrap;
 				justify-content: flex-start;
 				align-items: center;
 				padding-top: 24rpx;
 				width: 100%;
 				.peopleName {
 				  padding: 0 30rpx;
 				  height: 60rpx;
 				  margin: 0 20rpx 20rpx 0;
 				  transition: all 0.3s;
 				  background: #f2f2f2;
 				  border-radius: 2px;
 				  border-radius: 2px;
 				  line-height: 60rpx;
 				  text-align: center;
 				  color: #666666;
 				  font-size: 12px;
 				}
 				.active2 {
 				  background: rgba(255, 107, 74, 0.15);
 				  color: #ff6b4a;
 				}
 			}
 	  }
 	  .goods-data {
 	    width: 100%;
 	    box-sizing: border-box;
 	    padding: 37rpx 40rpx 0 40rpx;
 	    background: #ffffff;
 	    border-radius: 12rpx;
 	    .opCollapse {
 	      width: 100%;
 	      padding-bottom: 28rpx;
 	      margin-top: 7px;
 	      border-bottom: 1px solid #e9e9e9;
 	      .head {
 	        display: flex;
 	        justify-content: space-between;
 	        height: 24px;
 	        // font-family: PingFangSC-Medium;
 	        font-size: 16px;
 	        color: #333333;
 	        letter-spacing: -0.3px;
 	        text-align: justify;
 	        line-height: 24px;
 	        margin-bottom: 18rpx;
 	        .headRighted {
 	          width: 0;
 	          height: 0;
 	          border-left: 4px solid transparent;
 	          border-right: 4px solid transparent;
 	          border-bottom: 4px solid #cfcfcf;
 	          transform: scaleY(-1);
 	          margin-top: 10px;
 	        }
 	        .headMid {
 	          font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-left: -120rpx;
 	        }
 	        .headRight {
 	          width: 0;
 	          height: 0;
 	          border-left: 4px solid transparent;
 	          border-right: 4px solid transparent;
 	          border-bottom: 4px solid #cfcfcf;
 	          margin-top: 10px;
 	        }
 	      }
 	      .body {
 	        font-size: 12px;
 	        color: #666666;
 	        letter-spacing: 0;
 	        .bodyBox {
 	          margin-top: 15px;
 	          .names {
 	            font-size: 12px;
 	            color: #151515;
 	            letter-spacing: 0;
 	            text-align: justify;
 	            line-height: 17px;
 	            margin-left: 5px;
 	            margin-right: 10px;
 	          }
 	          text {
 	            font-size: 12px;
 	            color: #666666;
 	            letter-spacing: 0;
 	            text-align: justify;
 	          }
 	        }
 	      }
 	    .goods-form {
 	      display: flex;
 	      flex-direction: column;
 	      align-items: center;
 	      justify-content: center;
 	      background-color: #fff;
 	        width: 100%;
 	        padding: 40rpx 0;
 	      .p1 {
 	            font-size: 16px;
 	            color: #333333;
 	            letter-spacing: -0.3px;
 	            text-align: justify;
 	            line-height: 24px;
 	            margin: 4px 0;
 	        }
 	        .p2 {
 	            font-size: 12px;
 	            color: #999999;
 	            letter-spacing: -0.23px;
 	            margin-bottom: 32rpx;
 	        }
 	        .image2{
 	            width: 42rpx;
 	            height: 34rpx;
 	        margin-right: 12rpx;
 	        }
 	        .confirm {
 	            display: flex;
 	            align-items: center;
 	            font-size: 12px;
 	            color: #666666;
 	            letter-spacing: -0.23px;
 	            width: 684rpx;
 	            .image1{
 	                margin-right:25rpx;
 	          width: 42rpx;
 	          height: 38rpx;
 	            }
 	        }
 	        .picker{
 	      display: flex;
 	      flex-direction: column;
 	      justify-content: center;
 	      align-items: center;
 	      width: 100%;
 	      .picker-choice{
 	        display: flex;
 	        width: 684rpx;
 	        align-items: center;
 	            margin-bottom: 40rpx;
 	        .input{
 	          border-bottom: 1px solid #CFCFCF;
 	          height: 40rpx;
 	        }
 	        .choice-left{
 	          width: 210rpx;
 	          .pd{
 	            font-size: 14px;
 	            color: #333333;
 	            letter-spacing: -0.26px;
 	            text-align: justify;
 	            line-height: 24px;
 	            margin-right: 44rpx;
 	          }
 	          .p11 {
 	            font-size: 14px;
 	            color: #333333;
 	            letter-spacing: -0.26px;
 	            text-align: justify;
 	            line-height: 24px;
 	            // margin-right: 10px;
 	          }
 	          .p12 {
 	            font-size: 10px;
 	            color: #3F3F3F;
 	            letter-spacing: -0.19px;
 	            text-align: justify;
 	            line-height: 24px;
 	          }
 	        }
 	        .p13 {
 	          font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-right: 10px;
 	        }
 	            .p13-date {
 	                font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-right: 5px;
 	            }
 	        picker{
 	          width: 144rpx;
 	          height: 40rpx;
 	          display: flex;
 	          position: relative;
 	          .p14 {
 	            font-size: 14px;
 	            color: #666666;
 	            letter-spacing: -0.26px;
 	            text-align: center;
 	            width: 124rpx;
 	            border-bottom: 1px solid #CFCFCF;
 	            height: 38rpx;
 	          }
 	          image{
 	            width: 20rpx;
 	            height: 20rpx;
 	            position: absolute;
 	            right: 20rpx;
 	            top: 8rpx;
 	          }
 	        }
 	      }
 	    }
 	    }
 	    }
 	  }
 	  .choose {
 	    width: 100%;
 	    background: #ffffff;
 	    border-radius: 12rpx;
 	    margin-top: 20rpx;
 	    padding: 40rpx 40rpx 112rpx 40rpx;
 	    box-sizing: border-box;
 	    .chooseItem {
 	      width: 100%;
 	      padding-bottom: 32rpx;
 	      border-bottom: 1px solid #e9e9e9;
 	      margin-bottom: 28rpx;
 	    }
 	    .chooseRes {
 	      font-size: 12px;
 	      color: #666666;
 	    }
 	    .itemsWrap {
 	      display: flex;
 	      flex-direction: row;
 	      flex-wrap: wrap;
 	      justify-content: flex-start;
 	      align-items: center;
 	      padding-top: 24rpx;
 	      .item1 {
 	        width: 64rpx;
 	        height: 64rpx;
 	        border-radius: 32rpx;
 	        margin: 0 36rpx 24rpx 0;
 	        transition: all 0.3s;
 	        border: 1px solid #ffffff;
 	      }
 	      .item2 {
 	        // width: 100rpx;
 	        padding: 0 30rpx;
 	        height: 60rpx;
 	        margin: 0 20rpx 20rpx 0;
 	        transition: all 0.3s;
 	        background: #f2f2f2;
 	        border-radius: 2px;
 	        border-radius: 2px;
 	        line-height: 60rpx;
 	        text-align: center;
 	        color: #666666;
 	        font-size: 12px;
 	      }
 	      .active1 {
 	        opacity: 0.7;
 	        border: 1px solid #ff6b4a;
 	      }
 	      .active2 {
 	        background: rgba(255, 107, 74, 0.15);
 	        color: #ff6b4a;
 	      }
 	    }
 	  }
 	  .button {
 	    width: 100%;
 	    height: 112rpx;
 	    background-color: #ff6b4a;
 	    font-size: 16px;
 	    color: #ffffff;
 	    line-height: 112rpx;
 	    text-align: center;
 	    position: sticky;
 	    bottom: 0rpx;
 	    left: 0rpx;
 	  }
 	}
 	/* sheet弹窗 */
 	.sheet{
 		width: 100%;
 		height: 100%;
 		position: fixed;
 		top: 150%;
 		left: 0upx;
 		bottom: 0upx;
 		right: 0upx;
 		background:rgba(0,0,0,0.3);
 		z-index: 10000;
 	}
 	/* 显示时候的动画默认0.5s */
 	.sheetView{
 		width: 100%;
 		height: 0upx;
 		position: absolute;
 		bottom: 0upx;
 		background: white;
 		z-index: 10001;
 		transition: all 0.5s;
 	}
 	.sheetShow{
 		top:0upx !important;
 	}
 	/* 关闭时的动画，时间自己可以设置0.5s*/
 	.sheeHide{
 		top:120% !important;
 		transition: all 0.5s;
 	}
 	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
 	.sheetView_active{
 		height: 1042upx;
 	}
 </style>

src/components/CommodityCard/CommodityCard.vue

Diff comments View file @4ee9880

1	<template>	1	<template>
2	<view	2	<view
3	class="card"	3	class="card"
4	@tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"	4	@tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5	>	5	>
6	<easy-loadimage mode="widthFix"	6	<easy-loadimage mode="widthFix"
7	:scroll-top="scrollTop"	7	:scroll-top="scrollTop"
8	:image-src="goods.imgurl?goods.imgurl:goods.pic"	8	:image-src="goods.imgurl?goods.imgurl:goods.pic"
9	:viewHeight="viewHeight"></easy-loadimage>	9	:viewHeight="viewHeight"></easy-loadimage>
10	<!-- <image	10	<!-- <image
11	mode="widthFix"	11	mode="widthFix"
12	:src="goods.imgurl?goods.imgurl:goods.pic"	12	:src="goods.imgurl?goods.imgurl:goods.pic"
13	></image> -->	13	></image> -->
14	<view class="name">{{goods.name?goods.name:goods.p_name}}</view>	14	<view class="name">{{goods.name?goods.name:goods.p_name}}</view>
15	<view class="info">	15	<view class="info">
16	<view class="priceBox">	16	<view class="priceBox">
17	<view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>	17	<view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
18	<view class="originCost">	18	<view class="originCost">
19	<!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->	19	<!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
20	{{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}	20	{{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
21	</view>	21	</view>
22	</view>	22	</view>
23	<view class="trade_num">{{goods.trade_num}}人购买</view>	23	<view class="trade_num">{{goods.trade_num}}人购买</view>
24	</view>	24	</view>
25	</view>	25	</view>
26	</template>	26	</template>
27		27
28	<script>	28	<script>
29	import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'	29	import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30	// const MockData = require('@/static/easy-loadimage/mock-data.json')	30	// const MockData = require('@/static/easy-loadimage/mock-data.json')
31	export default {	31	export default {
32	components:{easyLoadimage},	32	components:{easyLoadimage},
33	props: {	33	props: {
34	/**	34	/**
35	* 商品数据	35	* 商品数据
36	*/	36	*/
37	goods: {	37	goods: {
38	id: Number,	38	id: Number,
39	imgurl: String,	39	imgurl: String,
40	name: String,	40	name: String,
41	rsSon: Object,	41	rsSon: Object,
42	originCost: String,	42	originCost: String,
43	price: String,	43	price: String,
44	trade_num: String,	44	trade_num: String,
45	goodType: String,	45	goodType: String,
46	},	46	},
47	scrollTop:Number,	47	scrollTop:Number,
48	viewHeight:Number,	48	viewHeight:Number,
49	},	49	},
50	created () {	50	created () {
51	},	51	},
52	data () {	52	data () {
53	return {	53	return {
54		54
55	}	55	}
56	},	56	},
57		57
58	methods: {	58	methods: {
59	toGoods (id, skId) {	59	toGoods (id, skId) {
60	console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)	60	console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
61	uni.navigateTo({	61	uni.navigateTo({
62	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,	62	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
63	success: res => {},	63	success: res => {},
64	fail: () => {},	64	fail: () => {},
65	complete: () => {},	65	complete: () => {},
66	})	66	})
67	},	67	},
68	},	68	},
69	}	69	}
70	</script>	70	</script>
71		71
72	<style lang="scss">	72	<style lang="scss">
73		73
74	image {	74	image {
75	width: 100%;	75	width: 100%;
76	height: 120rpx;	76	height: 120rpx;
77	}	77	}
78	.name {	78	.name {
79	width: 92%;	79	width: 92%;
80	height: 76rpx;	80	height: 84rpx;
81	padding: 5px 4%;	81	padding: 5px 4%;
82	box-sizing: border-box;	82	box-sizing: border-box;
83	display: -webkit-box;	83	display: -webkit-box;
84	-webkit-box-orient: vertical;	84	-webkit-box-orient: vertical;
85	-webkit-line-clamp: 2;	85	-webkit-line-clamp: 2;
86	text-align: justify;	86	text-align: justify;
87	overflow: hidden;	87	overflow: hidden;
88	font-size: 26rpx;	88	font-size: 26rpx;
89	color: #333333;	89	color: #333333;
90	}	90	}
91	.info {	91	.info {
92	display: flex;	92	display: flex;
93	justify-content: space-between;	93	justify-content: space-between;
94	align-items: center;	94	align-items: center;
95	width: 92%;	95	width: 92%;
96	padding: 5px 4% 5px 4%;	96	padding: 5px 4% 5px 4%;
97	.priceBox {	97	.priceBox {
98	display: flex;	98	display: flex;
99	justify-content: space-between;	99	justify-content: space-between;
100	align-items: center;	100	align-items: center;
101	.price {	101	.price {
102	color: #eb5d3b;	102	color: #eb5d3b;
103	font-size: 28rpx;	103	font-size: 28rpx;
104	font-weight: 600;	104	font-weight: 600;
105	margin-right: 10rpx;	105	margin-right: 10rpx;
106	}	106	}
107	.originCost {	107	.originCost {
108	text-decoration: line-through;	108	text-decoration: line-through;
109	color: #999999;	109	color: #999999;
110	font-size: 20rpx;	110	font-size: 20rpx;
111	}	111	}
112	}	112	}
113	.trade_num {	113	.trade_num {
114	color: #999999;	114	color: #999999;
115	font-size: 20rpx;	115	font-size: 20rpx;
116	}	116	}
117	}	117	}
118	</style>	118	</style>
119		119

src/components/uni-swipe-action-item/bindingx.js

Diff comments View file @4ee9880

File was created	1	const BindingX = uni.requireNativePlugin('bindingx');
	2	const dom = uni.requireNativePlugin('dom');
	3	const animation = uni.requireNativePlugin('animation');
	4
	5	export default {
	6	data() {
	7	return {
	8	right: 0,
	9	button: [],
	10	preventGesture: false
	11	}
	12	},
	13
	14	watch: {
	15	show(newVal) {
	16	if (!this.position \|\| JSON.stringify(this.position) === '{}') return;
	17	if (this.autoClose) return
	18	if (this.isInAnimation) return
	19	if (newVal) {
	20	this.open()
	21	} else {
	22	this.close()
	23	}
	24	},
	25	},
	26	created() {
	27	if (this.swipeaction.children !== undefined) {
	28	this.swipeaction.children.push(this)
	29	}
	30	},
	31	mounted() {
	32	this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
	33	this.selector = this.getEl(this.$refs['selector-content-hock']);
	34	this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
	35	this.position = {}
	36	this.x = 0
	37	setTimeout(() => {
	38	this.getSelectorQuery()
	39	}, 200)
	40	},
	41	beforeDestroy() {
	42	if (this.timing) {
	43	BindingX.unbind({
	44	token: this.timing.token,
	45	eventType: 'timing'
	46	})
	47	}
	48	if (this.eventpan) {
	49	BindingX.unbind({
	50	token: this.eventpan.token,
	51	eventType: 'pan'
	52	})
	53	}
	54	this.swipeaction.children.forEach((item, index) => {
	55	if (item === this) {
	56	this.swipeaction.children.splice(index, 1)
	57	}
	58	})
	59	},
	60	methods: {
	61	onClick(index, item) {
	62	this.$emit('click', {
	63	content: item,
	64	index
	65	})
	66	},
	67	touchstart(e) {
	68	if (this.isInAnimation) return
	69	if (this.stop) return
	70	this.stop = true
	71	if (this.autoClose) {
	72	this.swipeaction.closeOther(this)
	73	}
	74	let endWidth = this.right
	75	let boxStep = `(x+${this.x})`
	76	let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
	77
	78	let props = [{
	79	element: this.selector,
	80	property: 'transform.translateX',
	81	expression: pageX
	82	}]
	83
	84	let left = 0
	85	for (let i = 0; i < this.options.length; i++) {
	86	let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
	87	if (this.button.length === 0 \|\| !this.button[i] \|\| !this.button[i].width) return
	88	let moveMix = endWidth - left
	89	left += this.button[i].width
	90	let step = `(${this.x}+x)/${endWidth}`
	91	let moveX = `(${step}) * ${moveMix}`
	92	let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
	93	props.push({
	94	element: buttonSelectors,
	95	property: 'transform.translateX',
	96	expression: pageButtonX
	97	})
	98	}
	99
	100	this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
	101	if (e.state === 'end') {
	102	this.x = e.deltaX + this.x;
	103	if (this.x < -endWidth) {
	104	this.x = -endWidth
	105	}
	106	if (this.x > 0) {
	107	this.x = 0
	108	}
	109	this.stop = false
	110	this.bindTiming();
	111	}
	112	})
	113	},
	114	touchend(e) {
	115	this.$nextTick(() => {
	116	if (this.isopen && !this.isDrag && !this.isInAnimation) {
	117	this.close()
	118	}
	119	})
	120	},
	121	bindTiming() {
	122	if (this.isopen) {
	123	this.move(this.x, -this.right)
	124	} else {
	125	this.move(this.x, -40)
	126	}
	127	},
	128	move(left, value) {
	129	if (left >= value) {
	130	this.close()
	131	} else {
	132	this.open()
	133	}
	134	},
	135	/**
	136	* 开启swipe
	137	*/
	138	open() {
	139	this.animation(true)
	140	},
	141	/**
	142	* 关闭swipe
	143	*/
	144	close() {
	145	this.animation(false)
	146	},
	147	/**
	148	* 开启关闭动画
	149	* @param {Object} type
	150	*/
	151	animation(type) {
	152	this.isDrag = true
	153	let endWidth = this.right
	154	let time = 200
	155	this.isInAnimation = true;
	156
	157	let exit = `t>${time}`;
	158	let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
	159	let props = [{
	160	element: this.selector,
	161	property: 'transform.translateX',
	162	expression: translate_x_expression
	163	}]
	164
	165	let left = 0
	166	for (let i = 0; i < this.options.length; i++) {
	167	let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
	168	if (this.button.length === 0 \|\| !this.button[i] \|\| !this.button[i].width) return
	169	let moveMix = endWidth - left
	170	left += this.button[i].width
	171	let step = `${this.x}/${endWidth}`
	172	let moveX = `(${step}) * ${moveMix}`
	173	let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
	174	props.push({
	175	element: buttonSelectors,
	176	property: 'transform.translateX',
	177	expression: pageButtonX
	178	})
	179	}
	180
	181	this.timing = BindingX.bind({
	182	eventType: 'timing',
	183	exitExpression: exit,
	184	props: props
	185	}, (e) => {
	186	if (e.state === 'end' \|\| e.state === 'exit') {
	187	this.x = type ? -endWidth : 0
	188	this.isInAnimation = false;
	189
	190	this.isopen = this.isopen \|\| false
	191	if (this.isopen !== type) {
	192	this.$emit('change', type)
	193	}
	194	this.isopen = type
	195	this.isDrag = false
	196	}
	197	});
	198	},
	199	/**
	200	* 绑定 BindingX
	201	* @param {Object} anchor
	202	* @param {Object} props
	203	* @param {Object} fn
	204	*/
	205	_bind(anchor, props, eventType, fn) {
	206	return BindingX.bind({
	207	anchor,
	208	eventType,
	209	props
	210	}, (e) => {
	211	typeof(fn) === 'function' && fn(e)
	212	});
	213	},
	214	/**
	215	* 获取ref
	216	* @param {Object} el
	217	*/
	218	getEl(el) {
	219	return el.ref
	220	},
	221	/**
	222	* 获取节点信息
	223	*/
	224	getSelectorQuery() {
	225	dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
	226	if (this.position.content) return
	227	this.position.content = data.size
	228	})
	229	for (let i = 0; i < this.options.length; i++) {
	230	dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
	231	if (!this.button) {
	232	this.button = []
	233	}
	234	if (this.options.length === this.button.length) return
	235	this.button.push(data.size)
	236	this.right += data.size.width
	237	if (this.autoClose) return
	238	if (this.show) {
	239	this.open()
	240	}
	241	})
	242	}
	243	}
	244	}
	245	}
	246

src/components/uni-swipe-action-item/index.wxs

Diff comments View file @4ee9880

File was created	1	/**
	2	* 监听页面内值的变化,主要用于动态开关swipe-action
	3	* @param {Object} newValue
	4	* @param {Object} oldValue
	5	* @param {Object} ownerInstance
	6	* @param {Object} instance
	7	*/
	8	function sizeReady(newValue, oldValue, ownerInstance, instance) {
	9	var state = instance.getState()
	10	state.position = JSON.parse(newValue)
	11	if (!state.position \|\| state.position.length === 0) return
	12	var show = state.position[0].show
	13	state.left = state.left \|\| state.position[0].left;
	14	// 通过用户变量,开启或关闭
	15	if (show) {
	16	openState(true, instance, ownerInstance)
	17	} else {
	18	openState(false, instance, ownerInstance)
	19	}
	20	}
	21
	22	/**
	23	* 开始触摸操作
	24	* @param {Object} e
	25	* @param {Object} ins
	26	*/
	27	function touchstart(e, ins) {
	28	var instance = e.instance;
	29	var state = instance.getState();
	30	var pageX = e.touches[0].pageX;
	31	// 开始触摸时移除动画类
	32	instance.removeClass('ani');
	33	var owner = ins.selectAllComponents('.button-hock')
	34	for (var i = 0; i < owner.length; i++) {
	35	owner[i].removeClass('ani');
	36	}
	37	// state.position = JSON.parse(instance.getDataset().position);
	38	state.left = state.left \|\| state.position[0].left;
	39	// 获取最终按钮组的宽度
	40	state.width = pageX - state.left;
	41	ins.callMethod('closeSwipe')
	42	}
	43
	44	/**
	45	* 开始滑动操作
	46	* @param {Object} e
	47	* @param {Object} ownerInstance
	48	*/
	49	function touchmove(e, ownerInstance) {
	50	var instance = e.instance;
	51	var disabled = instance.getDataset().disabled
	52	var state = instance.getState()
	53	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取为 undefined 的问题,待框架修复
	54	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) \|\| false;
	55
	56	if (disabled) return
	57	var pageX = e.touches[0].pageX;
	58	move(pageX - state.width, instance, ownerInstance)
	59	}
	60
	61	/**
	62	* 结束触摸操作
	63	* @param {Object} e
	64	* @param {Object} ownerInstance
	65	*/
	66	function touchend(e, ownerInstance) {
	67	var instance = e.instance;
	68	var disabled = instance.getDataset().disabled
	69	var state = instance.getState()
	70
	71	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取为 undefined 的问题,待框架修复
	72	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) \|\| false;
	73
	74	if (disabled) return
	75	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
	76	// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题，主要是 ios13
	77	moveDirection(state.left, -40, instance, ownerInstance)
	78	}
	79
	80	/**
	81	* 设置移动距离
	82	* @param {Object} value
	83	* @param {Object} instance
	84	* @param {Object} ownerInstance
	85	*/
	86	function move(value, instance, ownerInstance) {
	87	var state = instance.getState()
	88	// 获取可滑动范围
	89	var x = Math.max(-state.position[1].width, Math.min((value), 0));
	90	state.left = x;
	91	instance.setStyle({
	92	transform: 'translateX(' + x + 'px)',
	93	'-webkit-transform': 'translateX(' + x + 'px)'
	94	})
	95	// 折叠按钮动画
	96	buttonFold(x, instance, ownerInstance)
	97	}
	98
	99	/**
	100	* 移动方向判断
	101	* @param {Object} left
	102	* @param {Object} value
	103	* @param {Object} ownerInstance
	104	* @param {Object} ins
	105	*/
	106	function moveDirection(left, value, ins, ownerInstance) {
	107	var state = ins.getState()
	108	var position = state.position
	109	var isopen = state.isopen
	110	if (!position[1].width) {
	111	openState(false, ins, ownerInstance)
	112	return
	113	}
	114	// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
	115	if (isopen) {
	116	if (-left <= position[1].width) {
	117	openState(false, ins, ownerInstance)
	118	} else {
	119	openState(true, ins, ownerInstance)
	120	}
	121	return
	122	}
	123	// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
	124	if (left <= value) {
	125	openState(true, ins, ownerInstance)
	126	} else {
	127	openState(false, ins, ownerInstance)
	128	}
	129	}
	130
	131	/**
	132	* 设置按钮移动距离
	133	* @param {Object} value
	134	* @param {Object} instance
	135	* @param {Object} ownerInstance
	136	*/
	137	function buttonFold(value, instance, ownerInstance) {
	138	var ins = ownerInstance.selectAllComponents('.button-hock');
	139	var state = instance.getState();
	140	var position = state.position;
	141	var arr = [];
	142	var w = 0;
	143	for (var i = 0; i < ins.length; i++) {
	144	if (!ins[i].getDataset().button) return
	145	var btnData = JSON.parse(ins[i].getDataset().button)
	146
	147	// fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
	148	if (typeof(btnData) === 'string') {
	149	btnData = JSON.parse(btnData)
	150	}
	151
	152	var button = btnData[i] && btnData[i].width \|\| 0
	153	w += button
	154	arr.push(-w)
	155	// 动态计算按钮组每个按钮的折叠动画移动距离
	156	var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
	157	if (i != 0) {
	158	ins[i].setStyle({
	159	transform: 'translateX(' + distance + 'px)',
	160	})
	161	}
	162	}
	163	}
	164
	165	/**
	166	* 开启状态
	167	* @param {Boolean} type
	168	* @param {Object} ins
	169	* @param {Object} ownerInstance
	170	*/
	171	function openState(type, ins, ownerInstance) {
	172	var state = ins.getState()
	173	var position = state.position
	174	if (state.isopen === undefined) {
	175	state.isopen = false
	176	}
	177	// 只有状态有改变才会通知页面改变状态
	178	if (state.isopen !== type) {
	179	// 通知页面,已经打开
	180	ownerInstance.callMethod('change', {
	181	open: type
	182	})
	183	}
	184	// 设置打开和移动状态
	185	state.isopen = type
	186
	187
	188	// 添加动画类
	189	ins.addClass('ani');
	190	var owner = ownerInstance.selectAllComponents('.button-hock')
	191	for (var i = 0; i < owner.length; i++) {
	192	owner[i].addClass('ani');
	193	}
	194	// 设置最终移动位置
	195	move(type ? -position[1].width : 0, ins, ownerInstance)
	196
	197	}
	198
	199	module.exports = {
	200	sizeReady: sizeReady,
	201	touchstart: touchstart,
	202	touchmove: touchmove,
	203	touchend: touchend
	204	}
	205

src/components/uni-swipe-action-item/mpalipay.js

Diff comments View file @4ee9880

File was created	1	export default {
	2	data() {
	3	return {
	4	isshow: false,
	5	viewWidth: 0,
	6	buttonWidth: 0,
	7	disabledView: false,
	8	x: 0,
	9	transition: false
	10	}
	11	},
	12	watch: {
	13	show(newVal) {
	14	if (this.autoClose) return
	15	if (newVal) {
	16	this.open()
	17	} else {
	18	this.close()
	19	}
	20	},
	21	},
	22	created() {
	23	if (this.swipeaction.children !== undefined) {
	24	this.swipeaction.children.push(this)
	25	}
	26	},
	27	beforeDestroy() {
	28	this.swipeaction.children.forEach((item, index) => {
	29	if (item === this) {
	30	this.swipeaction.children.splice(index, 1)
	31	}
	32	})
	33	},
	34	mounted() {
	35	this.isopen = false
	36	this.transition = true
	37	setTimeout(() => {
	38	this.getQuerySelect()
	39	}, 50)
	40
	41	},
	42	methods: {
	43	onClick(index, item) {
	44	this.$emit('click', {
	45	content: item,
	46	index
	47	})
	48	},
	49	touchstart(e) {
	50	let {
	51	pageX,
	52	pageY
	53	} = e.changedTouches[0]
	54	this.transition = false
	55	this.startX = pageX
	56	if (this.autoClose) {
	57	this.swipeaction.closeOther(this)
	58	}
	59	},
	60	touchmove(e) {
	61	let {
	62	pageX,
	63	} = e.changedTouches[0]
	64	this.slide = this.getSlide(pageX)
	65	if (this.slide === 0) {
	66	this.disabledView = false
	67	}
	68
	69	},
	70	touchend(e) {
	71	this.stop = false
	72	this.transition = true
	73	if (this.isopen) {
	74	if (this.moveX === -this.buttonWidth) {
	75	this.close()
	76	return
	77	}
	78	this.move()
	79	} else {
	80	if (this.moveX === 0) {
	81	this.close()
	82	return
	83	}
	84	this.move()
	85	}
	86	},
	87	open() {
	88	this.x = this.moveX
	89	this.$nextTick(() => {
	90	this.x = -this.buttonWidth
	91	this.moveX = this.x
	92
	93	if(!this.isopen){
	94	this.isopen = true
	95	this.$emit('change', true)
	96	}
	97	})
	98	},
	99	close() {
	100	this.x = this.moveX
	101	this.$nextTick(() => {
	102	this.x = 0
	103	this.moveX = this.x
	104	if(this.isopen){
	105	this.isopen = false
	106	this.$emit('change', false)
	107	}
	108	})
	109	},
	110	move() {
	111	if (this.slide === 0) {
	112	this.open()
	113	} else {
	114	this.close()
	115	}
	116	},
	117	onChange(e) {
	118	let x = e.detail.x
	119	this.moveX = x
	120	if (x >= this.buttonWidth) {
	121	this.disabledView = true
	122	this.$nextTick(() => {
	123	this.x = this.buttonWidth
	124	})
	125	}
	126	},
	127	getSlide(x) {
	128	if (x >= this.startX) {
	129	this.startX = x
	130	return 1
	131	} else {
	132	this.startX = x
	133	return 0
	134	}
	135
	136	},
	137	getQuerySelect() {
	138	const query = uni.createSelectorQuery().in(this);
	139	query.selectAll('.viewWidth-hook').boundingClientRect(data => {
	140
	141	this.viewWidth = data[0].width
	142	this.buttonWidth = data[1].width
	143	this.transition = false
	144	this.$nextTick(() => {
	145	this.transition = true
	146	})
	147
	148	if (!this.buttonWidth) {
	149	this.disabledView = true
	150	}
	151
	152	if (this.autoClose) return
	153	if (this.show) {
	154	this.open()
	155	}
	156	}).exec();
	157
	158	}
	159	}
	160	}
	161

src/components/uni-swipe-action-item/mpother.js

Diff comments View file @4ee9880

File was created	1	// #ifdef APP-NVUE
	2	const dom = weex.requireModule('dom');
	3	// #endif
	4	export default {
	5	data() {
	6	return {
	7	uniShow: false,
	8	left: 0
	9	}
	10	},
	11	computed: {
	12	moveLeft() {
	13	return `translateX(${this.left}px)`
	14	}
	15	},
	16	watch: {
	17	show(newVal) {
	18	if (!this.position \|\| JSON.stringify(this.position) === '{}') return;
	19	if (this.autoClose) return
	20	if (newVal) {
	21	this.$emit('change', true)
	22	this.open()
	23	} else {
	24	this.$emit('change', false)
	25	this.close()
	26	}
	27	}
	28	},
	29	mounted() {
	30	this.position = {}
	31	if (this.swipeaction.children !== undefined) {
	32	this.swipeaction.children.push(this)
	33	}
	34	setTimeout(() => {
	35	this.getSelectorQuery()
	36	}, 100)
	37	},
	38	beforeDestoy() {
	39	this.swipeaction.children.forEach((item, index) => {
	40	if (item === this) {
	41	this.swipeaction.children.splice(index, 1)
	42	}
	43	})
	44	},
	45	methods: {
	46	onClick(index, item) {
	47	this.$emit('click', {
	48	content: item,
	49	index
	50	})
	51	this.close()
	52	},
	53	touchstart(e) {
	54	const {
	55	pageX
	56	} = e.touches[0]
	57	if (this.disabled) return
	58	const left = this.position.content.left
	59	if (this.autoClose) {
	60	this.swipeaction.closeOther(this)
	61	}
	62	this.width = pageX - left
	63	if (this.isopen) return
	64	if (this.uniShow) {
	65	this.uniShow = false
	66	this.isopen = true
	67	this.openleft = this.left + this.position.button.width
	68	}
	69	},
	70	touchmove(e, index) {
	71	if (this.disabled) return
	72	const {
	73	pageX
	74	} = e.touches[0]
	75	this.setPosition(pageX)
	76	},
	77	touchend() {
	78	if (this.disabled) return
	79	if (this.isopen) {
	80	this.move(this.openleft, 0)
	81	return
	82	}
	83	this.move(this.left, -40)
	84	},
	85	setPosition(x, y) {
	86	if (!this.position.button.width) {
	87	return
	88	}
	89	// this.left = x - this.width
	90	this.setValue(x - this.width)
	91	},
	92	setValue(value) {
	93	// 设置最大最小值
	94	this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
	95	this.position.content.left = this.left
	96	if (this.isopen) {
	97	this.openleft = this.left + this.position.button.width
	98	}
	99	},
	100	move(left, value) {
	101	if (left >= value) {
	102	this.$emit('change', false)
	103	this.close()
	104	} else {
	105	this.$emit('change', true)
	106	this.open()
	107	}
	108	},
	109	open() {
	110	this.uniShow = true
	111	this.left = -this.position.button.width
	112	this.setValue(-this.position.button.width)
	113	},
	114	close() {
	115	this.uniShow = true
	116	this.setValue(0)
	117	setTimeout(() => {
	118	this.uniShow = false
	119	this.isopen = false
	120	}, 300)
	121	},
	122	getSelectorQuery() {
	123	// #ifndef APP-NVUE
	124	const views = uni.createSelectorQuery()
	125	.in(this)
	126	views
	127	.selectAll('.selector-query-hock')
	128	.boundingClientRect(data => {
	129	this.position.content = data[1]
	130	this.position.button = data[0]
	131	if (this.autoClose) return
	132	if (this.show) {
	133	this.open()
	134	} else {
	135	this.close()
	136	}
	137	})
	138	.exec()
	139	// #endif
	140	// #ifdef APP-NVUE
	141	dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
	142	if (this.position.content) return
	143	this.position.content = data.size
	144	})
	145	dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
	146	if (this.position.button) return
	147	this.position.button = data.size
	148	if (this.autoClose) return
	149	if (this.show) {
	150	this.open()
	151	} else {
	152	this.close()
	153	}
	154	})
	155	// #endif
	156	}
	157	}
	158	}
	159

src/components/uni-swipe-action-item/mpwxs.js

Diff comments View file @4ee9880

File was created	1	export default {
	2	data() {
	3	return {
	4	position: [],
	5	button: []
	6	}
	7	},
	8	computed: {
	9	pos() {
	10	return JSON.stringify(this.position)
	11	},
	12	btn() {
	13	return JSON.stringify(this.button)
	14	}
	15	},
	16	watch: {
	17	show(newVal) {
	18	if (this.autoClose) return
	19	let valueObj = this.position[0]
	20	if (!valueObj) {
	21	this.init()
	22	return
	23	}
	24	valueObj.show = newVal
	25	this.$set(this.position, 0, valueObj)
	26	}
	27	},
	28	created() {
	29	if (this.swipeaction.children !== undefined) {
	30	this.swipeaction.children.push(this)
	31	}
	32	},
	33	mounted() {
	34	this.init()
	35
	36	},
	37	beforeDestroy() {
	38	this.swipeaction.children.forEach((item, index) => {
	39	if (item === this) {
	40	this.swipeaction.children.splice(index, 1)
	41	}
	42	})
	43	},
	44	methods: {
	45	init() {
	46
	47	setTimeout(() => {
	48	this.getSize()
	49	this.getButtonSize()
	50	}, 50)
	51	},
	52	closeSwipe(e) {
	53	if (!this.autoClose) return
	54	this.swipeaction.closeOther(this)
	55	},
	56
	57	change(e) {
	58	this.$emit('change', e.open)
	59	let valueObj = this.position[0]
	60	if (valueObj.show !== e.open) {
	61	valueObj.show = e.open
	62	this.$set(this.position, 0, valueObj)
	63	}
	64	},
	65	onClick(index, item) {
	66	this.$emit('click', {
	67	content: item,
	68	index
	69	})
	70	},
	71	appTouchStart(){},
	72	appTouchEnd(){},
	73	getSize() {
	74	const views = uni.createSelectorQuery().in(this)
	75	views
	76	.selectAll('.selector-query-hock')
	77	.boundingClientRect(data => {
	78	if (this.autoClose) {
	79	data[0].show = false
	80	} else {
	81	data[0].show = this.show
	82	}
	83	this.position = data
	84	})
	85	.exec()
	86	},
	87	getButtonSize() {
	88	const views = uni.createSelectorQuery().in(this)
	89	views
	90	.selectAll('.button-hock')
	91	.boundingClientRect(data => {
	92	this.button = data
	93	})
	94	.exec()
	95	}
	96	}
	97	}
	98

src/components/uni-swipe-action-item/uni-swipe-action-item.vue

Diff comments View file @4ee9880

File was created	1	<template>
	2	<view class="uni-swipe">
	3	<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
	4	<!-- #ifdef APP-VUE \|\| MP-WEIXIN \|\| H5 -->
	5	<view class="uni-swipe_content">
	6	<view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
	7	@touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
	8	<view class="uni-swipe_box">
	9	<slot />
	10	</view>
	11	<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
	12	<!-- 使用 touchend 解决 ios 13 不触发按钮事件的问题-->
	13	<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
	14	backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
	15	fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
	16	}"
	17	class="uni-swipe_button button-hock" @touchend="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
	18	</view>
	19	</view>
	20	</view>
	21	<!-- #endif -->
	22
	23	<!-- app nvue端使用 bindingx -->
	24	<!-- #ifdef APP-NVUE -->
	25	<view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
	26	<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
	27	<view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
	28	backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
	29	class="uni-swipe_button " @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text></view>
	30	</view>
	31	<view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
	32	<view class="uni-swipe_box">
	33	<slot />
	34	</view>
	35	</view>
	36	</view>
	37	<!-- #endif -->
	38
	39	<!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
	40	<!-- #ifndef APP-PLUS \|\| MP-WEIXIN \|\| MP-ALIPAY \|\| H5 -->
	41	<view class="uni-swipe_content">
	42	<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
	43	<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
	44	backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
	45	fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
	46	}"
	47	class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
	48	</view>
	49	<view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
	50	@touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
	51	<view class="uni-swipe_move-box" >
	52	<view class="uni-swipe_box">
	53	<slot />
	54	</view>
	55	</view>
	56	</view>
	57	</view>
	58	<!-- #endif -->
	59	<!-- #ifdef MP-ALIPAY -->
	60	<view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
	61	<view class="viewWidth-hook">
	62	<movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
	63	<movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
	64	:class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
	65	<view class="movable-view-box">
	66	<slot></slot>
	67	</view>
	68	</movable-view>
	69	</movable-area>
	70	</view>
	71	<view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
	72	<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
	73	backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
	74	fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
	75	}"
	76	class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
	77	</view>
	78	</view>
	79	<!-- #endif -->
	80	</view>
	81	</template>
	82	<script src="./index.wxs" module="swipe" lang="wxs"></script>
	83	<script>
	84	// #ifdef APP-VUE\|\| MP-WEIXIN \|\| H5
	85	import mpwxs from './mpwxs'
	86	// #endif
	87
	88	// #ifdef APP-NVUE
	89	import bindingx from './bindingx.js'
	90	// #endif
	91
	92	// #ifndef APP-PLUS\|\| MP-WEIXIN \|\| MP-ALIPAY \|\| H5
	93	import mixins from './mpother'
	94	// #endif
	95
	96	// #ifdef MP-ALIPAY
	97	import mpalipay from './mpalipay'
	98	// #endif
	99
	100	/**
	101	* SwipeActionItem 滑动操作子组件
	102	* @description 通过滑动触发选项的容器
	103	* @tutorial https://ext.dcloud.net.cn/plugin?id=181
	104	* @property {Boolean} show = [true\|false] 开启关闭组件，auto-close = false 时生效
	105	* @property {Boolean} disabled = [true\|false] 是否禁止滑动
	106	* @property {Boolean} autoClose = [true\|false] 其他组件开启的时候，当前组件是否自动关闭
	107	* @property {Array} options 组件选项内容及样式
	108	* @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
	109	* @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
	110	*/
	111
	112	export default {
	113	// #ifdef APP-VUE\|\| MP-WEIXIN\|\|H5
	114	mixins: [mpwxs],
	115	// #endif
	116
	117	// #ifdef APP-NVUE
	118	mixins: [bindingx],
	119	// #endif
	120
	121	// #ifndef APP-PLUS\|\| MP-WEIXIN \|\| MP-ALIPAY \|\| H5
	122	mixins: [mixins],
	123	// #endif
	124
	125	// #ifdef MP-ALIPAY
	126	mixins: [mpalipay],
	127	// #endif
	128
	129	props: {
	130	/**
	131	* 按钮内容
	132	*/
	133	options: {
	134	type: Array,
	135	default () {
	136	return []
	137	}
	138	},
	139	/**
	140	* 禁用
	141	*/
	142	disabled: {
	143	type: Boolean,
	144	default: false
	145	},
	146	/**
	147	* 变量控制开关
	148	*/
	149	show: {
	150	type: Boolean,
	151	default: false
	152	},
	153	/**
	154	* 是否自动关闭
	155	*/
	156	autoClose: {
	157	type: Boolean,
	158	default: true
	159	}
	160	},
	161	inject: ['swipeaction']
	162
	163
	164	}
	165	</script>
	166	<style lang="scss" scoped>
	167	.uni-swipe {
	168	overflow: hidden;
	169	}
	170
	171	.uni-swipe-box {
	172	position: relative;
	173	width: 100%;
	174	}
	175
	176	.uni-swipe_content {
	177	flex: 1;
	178	position: relative;
	179	}
	180
	181	.uni-swipe_move-box {
	182	/* #ifndef APP-NVUE */
	183	display: flex;
	184	/* #endif */
	185	position: relative;
	186	flex-direction: row;
	187	}
	188
	189	.uni-swipe_box {
	190	/* #ifndef APP-NVUE */
	191	display: flex;
	192	flex-direction: row;
	193	width: 100%;
	194	flex-shrink: 0;
	195	/* #endif */
	196	/* #ifdef APP-NVUE */
	197	flex: 1;
	198	/* #endif */
	199	font-size: 14px;
	200	background-color: #fff;
	201	}
	202
	203	.uni-swipe_button-group {
	204	/* #ifndef APP-VUE\|\| MP-WEIXIN\|\|H5 */
	205	position: absolute;
	206	top: 0;
	207	right: 0;
	208	bottom: 0;
	209	z-index: 0;
	210	/* #endif */
	211	/* #ifndef APP-NVUE */
	212	display: flex;
	213	flex-shrink: 0;
	214	/* #endif */
	215	flex-direction: row;
	216	}
	217
	218	.uni-swipe_button {
	219	/* #ifdef APP-NVUE */
	220	position: absolute;
	221	left: 0;
	222	top: 0;
	223	bottom: 0;
	224	/* #endif */
	225	/* #ifndef APP-NVUE */
	226	display: flex;
	227	/* #endif */
	228	flex-direction: row;
	229	justify-content: center;
	230	align-items: center;
	231	padding: 0 20px;
	232	}
	233
	234	.uni-swipe_button-text {
	235	/* #ifndef APP-NVUE */
	236	flex-shrink: 0;
	237	/* #endif */
	238	font-size: 14px;
	239	}
	240
	241	.ani {
	242	transition-property: transform;
	243	transition-duration: 0.3s;
	244	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	245	}
	246
	247	/* #ifdef MP-ALIPAY */
	248	.movable-area {
	249	width: 300px;
	250	height: 100%;
	251	height: 45px;
	252	}
	253
	254	.movable-view {
	255	position: relative;
	256	width: 160%;
	257	height: 45px;
	258	z-index: 2;
	259	}
	260	.transition {
	261	transition: all 0.3s;
	262	}
	263
	264	.movable-view-box {
	265	width: 100%;
	266	height: 100%;
	267	background-color: #fff;
	268	}
	269	/* #endif */
	270	</style>
	271

src/components/uni-swipe-action/uni-swipe-action.vue

Diff comments View file @4ee9880

File was created	1	<template>
	2	<view>
	3	<slot></slot>
	4	</view>
	5	</template>
	6
	7	<script>
	8	/**
	9	* SwipeAction 滑动操作
	10	* @description 通过滑动触发选项的容器
	11	* @tutorial https://ext.dcloud.net.cn/plugin?id=181
	12	*/
	13	export default {
	14	data() {
	15	return {};
	16	},
	17	provide() {
	18	return {
	19	swipeaction: this
	20	}
	21	},
	22	created() {
	23	this.children = []
	24	},
	25	methods: {
	26	closeOther(vm) {
	27	let children = this.children
	28	children.forEach((item, index) => {
	29	if (vm === item) return
	30	// 支付宝执行以下操作
	31	// #ifdef MP-ALIPAY
	32	if (item.isopen) {
	33	item.close()
	34	}
	35	// #endif
	36
	37	// app vue 端、h5 、微信、支付宝执行以下操作
	38	// #ifdef APP-VUE \|\| H5 \|\| MP-WEIXIN
	39	let position = item.position[0]
	40	let show = position.show
	41	if (show) {
	42	position.show = false
	43	}
	44	// #endif
	45
	46	// nvue 执行以下操作
	47	// #ifdef APP-NVUE \|\| MP-BAIDU \|\| MP-QQ \|\| MP-TOUTIAO
	48	item.close()
	49	// #endif
	50	})
	51	}
	52	}
	53	}
	54	</script>
	55
	56	<style>
	57
	58	</style>
	59

src/components/uni-transition/uni-transition.vue

Diff comments View file @4ee9880

1	<template>	1	<template>
2	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"	2	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
3	@click="change">	3	@click="change">
4	<slot></slot>	4	<slot></slot>
5	</view>	5	</view>
6	</template>	6	</template>
7		7
8	<script>	8	<script>
9	// #ifdef APP-NVUE	9	// #ifdef APP-NVUE
10	const animation = uni.requireNativePlugin('animation');	10	const animation = uni.requireNativePlugin('animation');
11	// #endif	11	// #endif
12	/**	12	/**
13	* Transition 过渡动画	13	* Transition 过渡动画
14	* @description 简单过渡动画组件	14	* @description 简单过渡动画组件
15	* @tutorial https://ext.dcloud.net.cn/plugin?id=985	15	* @tutorial https://ext.dcloud.net.cn/plugin?id=985
16	* @property {Boolean} show = [false\|true] 控制组件显示或隐藏	16	* @property {Boolean} show = [false\|true] 控制组件显示或隐藏
17	* @property {Array} modeClass = [fade\|slide-top\|slide-right\|slide-bottom\|slide-left\|zoom-in\|zoom-out] 过渡动画类型	17	* @property {Array} modeClass = [fade\|slide-top\|slide-right\|slide-bottom\|slide-left\|zoom-in\|zoom-out] 过渡动画类型
18	* @value fade 渐隐渐出过渡	18	* @value fade 渐隐渐出过渡
19	* @value slide-top 由上至下过渡	19	* @value slide-top 由上至下过渡
20	* @value slide-right 由右至左过渡	20	* @value slide-right 由右至左过渡
21	* @value slide-bottom 由下至上过渡	21	* @value slide-bottom 由下至上过渡
22	* @value slide-left 由左至右过渡	22	* @value slide-left 由左至右过渡
23	* @value zoom-in 由小到大过渡	23	* @value zoom-in 由小到大过渡
24	* @value zoom-out 由大到小过渡	24	* @value zoom-out 由大到小过渡
25	* @property {Number} duration 过渡动画持续时间	25	* @property {Number} duration 过渡动画持续时间
26	* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`	26	* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
27	*/	27	*/
28	export default {	28	export default {
29	name: 'uniTransition',	29	name: 'uniTransition',
30	props: {	30	props: {
31	show: {	31	show: {
32	type: Boolean,	32	type: Boolean,
33	default: false	33	default: false
34	},	34	},
35	modeClass: {	35	modeClass: {
36	type: Array,	36	type: Array,
37	default () {	37	default () {
38	return []	38	return []
39	}	39	}
40	},	40	},
41	duration: {	41	duration: {
42	type: Number,	42	type: Number,
43	default: 300	43	default: 300
44	},	44	},
45	styles: {	45	styles: {
46	type: Object,	46	type: Object,
47	default () {	47	default () {
48	return {}	48	return {}
49	}	49	}
50	}	50	}
51	},	51	},
52	data() {	52	data() {
53	return {	53	return {
54	isShow: false,	54	isShow: false,
55	transform: '',	55	transform: '',
56	ani: { in: '',	56	ani: { in: '',
57	active: ''	57	active: ''
58	}	58	}
59	};	59	};
60	},	60	},
61	watch: {	61	watch: {
62	show: {	62	show: {
63	handler(newVal) {	63	handler(newVal) {
64	if (newVal) {	64	if (newVal) {
65	this.open()	65	this.open()
66	} else {	66	} else {
67	this.close()	67	this.close()
68	}	68	}
69	},	69	},
70	immediate: true	70	immediate: true
71	}	71	}
72	},	72	},
73	computed: {	73	computed: {
74	stylesObject() {	74	stylesObject() {
75	let styles = {	75	let styles = {
76	...this.styles,	76	...this.styles,
77	'transition-duration': this.duration / 1000 + 's'	77	'transition-duration': this.duration / 1000 + 's'
78	}	78	}
79	let transfrom = ''	79	let transfrom = ''
80	for (let i in styles) {	80	for (let i in styles) {
81	let line = this.toLine(i)	81	let line = this.toLine(i)
82	transfrom += line + ':' + styles[i] + ';'	82	transfrom += line + ':' + styles[i] + ';'
83	}	83	}
84	return transfrom	84	return transfrom
85	}	85	}
86	},	86	},
87	created() {	87	created() {
88	// this.timer = null	88	// this.timer = null
89	// this.nextTick = (time = 50) => new Promise(resolve => {	89	// this.nextTick = (time = 50) => new Promise(resolve => {
90	// clearTimeout(this.timer)	90	// clearTimeout(this.timer)
91	// this.timer = setTimeout(resolve, time)	91	// this.timer = setTimeout(resolve, time)
92	// return this.timer	92	// return this.timer
93	// });	93	// });
94	},	94	},
95	methods: {	95	methods: {
96	change() {	96	change() {
97	this.$emit('click', {	97	this.$emit('click', {
98	detail: this.isShow	98	detail: this.isShow
99	})	99	})
100	},	100	},
101	open() {	101	open() {
102	clearTimeout(this.timer)	102	clearTimeout(this.timer)
103	this.isShow = true	103	this.isShow = true
104	this.transform = ''	104	this.transform = ''
105	this.ani.in = ''	105	this.ani.in = ''
106	for (let i in this.getTranfrom(false)) {	106	for (let i in this.getTranfrom(false)) {
107	if (i === 'opacity') {	107	if (i === 'opacity') {
108	this.ani.in = 'fade-in'	108	this.ani.in = 'fade-in'
109	} else {	109	} else {
110	this.transform += `${this.getTranfrom(false)[i]} `	110	this.transform += `${this.getTranfrom(false)[i]} `
111	}	111	}
112	}	112	}
113	this.$nextTick(() => {	113	this.$nextTick(() => {
114	setTimeout(() => {	114	setTimeout(() => {
115	this._animation(true)	115	this._animation(true)
116	}, 50)	116	}, 50)
117	})	117	})
118		118
119	},	119	},
120	close(type) {	120	close(type) {
121	clearTimeout(this.timer)	121	clearTimeout(this.timer)
122	this._animation(false)	122	this._animation(false)
123	},	123	},
124	_animation(type) {	124	_animation(type) {
125	let styles = this.getTranfrom(type)	125	let styles = this.getTranfrom(type)
126	// #ifdef APP-NVUE	126	// #ifdef APP-NVUE
127	if(!this.$refs['ani']) return	127	if(!this.$refs['ani']) return
128	animation.transition(this.$refs['ani'].ref, {	128	animation.transition(this.$refs['ani'].ref, {
129	styles,	129	styles,
130	duration: this.duration, //ms	130	duration: this.duration, //ms
131	timingFunction: 'ease',	131	timingFunction: 'ease',
132	needLayout: false,	132	needLayout: false,
133	delay: 0 //ms	133	delay: 0 //ms
134	}, () => {	134	}, () => {
135	if (!type) {	135	if (!type) {
136	this.isShow = false	136	this.isShow = false
137	}	137	}
138	this.$emit('change', {	138	this.$emit('change', {
139	detail: this.isShow	139	detail: this.isShow
140	})	140	})
141	})	141	})
142	// #endif	142	// #endif
143	// #ifndef APP-NVUE	143	// #ifndef APP-NVUE
144	this.transform = ''	144	this.transform = ''
145	for (let i in styles) {	145	for (let i in styles) {
146	if (i === 'opacity') {	146	if (i === 'opacity') {
147	this.ani.in = `fade-${type?'out':'in'}`	147	this.ani.in = `fade-${type?'out':'in'}`
148	} else {	148	} else {
149	this.transform += `${styles[i]} `	149	this.transform += `${styles[i]} `
150	}	150	}
151	}	151	}
152	this.timer = setTimeout(() => {	152	this.timer = setTimeout(() => {
153	if (!type) {	153	if (!type) {
154	this.isShow = false	154	this.isShow = false
155	}	155	}
156	this.$emit('change', {	156	this.$emit('change', {
157	detail: this.isShow	157	detail: this.isShow
158	})	158	})
159		159
160	}, this.duration)	160	}, this.duration)
161	// #endif	161	// #endif
162		162
163	},	163	},
164	getTranfrom(type) {	164	getTranfrom(type) {
165	let styles = {	165	let styles = {
166	transform: ''	166	transform: ''
167	}	167	}
168	this.modeClass.forEach((mode) => {	168	this.modeClass.forEach((mode) => {
169	switch (mode) {	169	switch (mode) {
170	case 'fade':	170	case 'fade':
171	styles.opacity = type ? 1 : 0	171	styles.opacity = type ? 1 : 0
172	break;	172	break;
173	case 'slide-top':	173	case 'slide-top':
174	styles.transform += `translateY(${type?'0':'-100%'}) `	174	styles.transform += `translateY(${type?'0':'-100%'}) `
175	break;	175	break;
176	case 'slide-right':	176	case 'slide-right':
177	styles.transform += `translateX(${type?'0':'100%'}) `	177	styles.transform += `translateX(${type?'0':'100%'}) `
178	break;	178	break;
179	case 'slide-bottom':	179	case 'slide-bottom':
180	styles.transform += `translateY(${type?'0':'100%'}) `	180	styles.transform += `translateY(${type?'0':'100%'}) `
181	break;	181	break;
182	case 'slide-left':	182	case 'slide-left':
183	styles.transform += `translateX(${type?'0':'-100%'}) `	183	styles.transform += `translateX(${type?'0':'-100%'}) `
184	break;	184	break;
185	case 'zoom-in':	185	case 'zoom-in':
186	styles.transform += `scale(${type?1:0.8}) `	186	styles.transform += `scale(${type?1:0.8}) `
187	break;	187	break;
188	case 'zoom-out':	188	case 'zoom-out':
189	styles.transform += `scale(${type?1:1.2}) `	189	styles.transform += `scale(${type?1:1.2}) `
190	break;	190	break;
191	}	191	}
192	})	192	})
193	return styles	193	return styles
194	},	194	},
195	_modeClassArr(type) {	195	_modeClassArr(type) {
196	let mode = this.modeClass	196	let mode = this.modeClass
197	if (typeof(mode) !== "string") {	197	if (typeof(mode) !== "string") {
198	let modestr = ''	198	let modestr = ''
199	mode.forEach((item) => {	199	mode.forEach((item) => {
200	modestr += (item + '-' + type + ',')	200	modestr += (item + '-' + type + ',')
201	})	201	})
202	return modestr.substr(0, modestr.length - 1)	202	return modestr.substr(0, modestr.length - 1)
203	} else {	203	} else {
204	return mode + '-' + type	204	return mode + '-' + type
205	}	205	}
206	},	206	},
207	// getEl(el) {	207	// getEl(el) {
208	// console.log(el \|\| el.ref \|\| null);	208	// console.log(el \|\| el.ref \|\| null);
209	// return el \|\| el.ref \|\| null	209	// return el \|\| el.ref \|\| null
210	// },	210	// },
211	toLine(name) {	211	toLine(name) {
212	return name.replace(/([A-Z])/g, "-$1").toLowerCase();	212	return name.replace(/([A-Z])/g, "-$1").toLowerCase();
213	}	213	}
214	}	214	}
215	}	215	}
216	</script>	216	</script>
217		217
218	<style>	218	<style>
219	.uni-transition {	219	.uni-transition {
220	transition-timing-function: ease;	220	transition-timing-function: ease;
221	transition-duration: 0.3s;	221	transition-duration: 0.3s;
222	transition-property: transform, opacity;	222	transition-property: transform, opacity;
223	}	223	}
224		224
225	.fade-in {	225	.fade-in {
226	opacity: 0;	226	opacity: 0;
227	}	227	}
228		228
229	.fade-active {	229	.fade-active {
230	opacity: 1;	230	opacity: 1;
231	}	231	}
232		232
233	.slide-top-in {	233	.slide-top-in {
234	/* transition-property: transform, opacity; */	234	/* transition-property: transform, opacity; */
235	transform: translateY(-100%);	235	transform: translateY(-100%);
236	}	236	}
237		237
238	.slide-top-active {	238	.slide-top-active {
239	transform: translateY(0);	239	transform: translateY(0);
240	/* opacity: 1; */	240	/* opacity: 1; */
241	}	241	}
242		242
243	.slide-right-in {	243	.slide-right-in {
244	transform: translateX(100%);	244	transform: translateX(100%);
245	}	245	}
246		246
247	.slide-right-active {	247	.slide-right-active {
248	transform: translateX(0);	248	transform: translateX(0);
249	}	249	}
250		250
251	.slide-bottom-in {	251	.slide-bottom-in {
252	transform: translateY(100%);	252	transform: translateY(100%);
253	}	253	}
254		254
255	.slide-bottom-active {	255	.slide-bottom-active {
256	transform: translateY(0);	256	transform: translateY(0);
257	}	257	}
258		258
259	.slide-left-in {	259	.slide-left-in {
260	transform: translateX(-100%);	260	transform: translateX(-100%);
261	}	261	}
262		262
263	.slide-left-active {	263	.slide-left-active {
264	transform: translateX(0);	264	transform: translateX(0);
265	opacity: 1;	265	opacity: 1;
266	}	266	}
267		267
268	.zoom-in-in {	268	.zoom-in-in {
269	transform: scale(0.8);	269	transform: scale(0.8);
270	}	270	}
271		271
272	.zoom-out-active {	272	.zoom-out-active {
273	transform: scale(1);	273	transform: scale(1);
274	}	274	}
275		275
276	.zoom-out-in {	276	.zoom-out-in {
277	transform: scale(1.2);	277	transform: scale(1.2);
278	}	278	}
279	</style>	279	</style>
280		280

src/pages.json

Diff comments View file @4ee9880

 {
     "pages": [
         {
             "path": "pages/index/index",
             "style": {
                 "navigationBarTitleText": "商城一览"
             }
         },
         {
             "path": "pages/user/user",
             "style": {
                 "navigationBarTitleText": "我的"
             }
         },
         {
             "path": "pages/addOpticsData/addOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         },
         {
             "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
             "style": {
                 "navigationBarTitleText": "镜片名称名称"
             }
         },
         {
             "path": "pages/purchaseLenses/purchaseLenses",
             "style": {
                 "navigationBarTitleText": "参数选择"
             }
         },
         {
             "path": "pages/lensDetails/lensDetails",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         {
             "path": "pages/details/details",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         {
             "path": "pages/myOrderPaying/myOrderPaying",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/myOrder/myOrder",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/cart/cart",
             "style": {
-                "navigationBarTitleText": "购物车"
+                "navigationBarTitleText": "购物车",
+				// "disableScroll":true,
+				"app-plus":{
+					"bounce":"none"
+				}
             }
         },
         {
             "path": "pages/frameDetail/frameDetail",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         // {
         //     "path": "pages/refundProgress/refundProgress",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         // {
         //     "path": "pages/address/addAddress",
         //     "style": {
         //         "navigationBarTitleText": "新增地址"
         //     }
         // },
         // {
         //     "path": "pages/address/addressList",
         //     "style": {
         //         "navigationBarTitleText": "地址管理"
         //     }
         // },
         {
             "path": "pages/confirmOrder/confirmOrder",
             "style": {
                 "navigationBarTitleText": "确认订单"
             }
         },
         // {
         //     "path": "pages/refundment/refundWays",
         //     "style": {
         //         "navigationBarTitleText": "退款方式"
         //     }
         // },
         // {
         //     "path": "pages/refundment/refundment",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         {
             "path": "pages/predelivery/predelivery",
             "style": {
                 "navigationBarTitleText": "待发货"
             }
         },
         {
             "path": "pages/customerService/customerService",
             "style": {
                 "navigationBarTitleText": "在线客服"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_sun",
             "style": {
                 "navigationBarTitleText": "太阳镜选购页"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_k",
             "style": {
                 "navigationBarTitleText": "镜框选购页"
             }
         },
         {
             "path": "pages/newOpticsData/newOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         }
     ],
     "subpackages": [
         {
             "root": "pages/refundment",
             "pages": [
                 "pages/refundment/refundWays",
                 "pages/refundment/refundment",
                 "pages/refundProgress/refundProgress"
             ]
         },
         {
             "root": "pages/address",
             "name": "pack2",
             "pages": [
                 "pages/address/addAddress",
                 "pages/address/addressList"
             ]
         }
     ],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
         "navigationBarBackgroundColor": "#F8F8F8",
         "backgroundColor": "#F8F8F8"
     },
     "tabBar": {
         "color": "#C0C4CC",
         "selectedColor": "#fa436a",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
         "list": [
             {
                 "pagePath": "pages/index/index",
                 "iconPath": "static/tab-home.png",
                 "selectedIconPath": "static/tab-home-current.png",
                 "text": "首页"
             },
             {
                 "pagePath": "pages/cart/cart",
                 "iconPath": "static/tab-cart.png",
                 "selectedIconPath": "static/tab-cart-current.png",
                 "text": "购物车"
             },
             {
                 "pagePath": "pages/user/user",
                 "iconPath": "static/tab-my.png",
                 "selectedIconPath": "static/tab-my-current.png",
                 "text": "我的"
             }
         ]
     },
     "condition": {
         "current": 0,
         "list": [
             // {
             //     "name": "首页",
             //     "path": "pages/test/index",
             //     "query": ""
             // },
             {
                 "name": "首页",
                 "path": "pages/index/index",
                 "query": ""
             },
             {
                 "name": "产品详情",
                 "path": "pages/details/details",
                 "query": ""
             },
             {
                 "name": "旧版产品详情",
                 "path": "pages/frameDetail/frameDetail",
                 "query": ""
             },
             {
                 "name": "镜片、美瞳参数选择",
                 "path": "pages/purchaseLenses/purchaseLenses",
                 "query": ""
             },
             {
                 "name": "确认订单",
                 "path": "pages/confirmOrder/confirmOrder",
                 "query": ""
             },
             {
                 "name": "新增地址",
                 "path": "pages/address/addAddress",
                 "query": ""
             },
             {
                 "name": "地址管理",
                 "path": "pages/address/addressList",
                 "query": ""
             },
             {
                 "name": "我的订单",
                 "path": "pages/myOrder/myOrder",
                 "query": ""
             },
             {
                 "name": "待付款订单详情",
                 "path": "pages/myOrderPaying/myOrderPaying",
                 "query": ""
             },
             {
                 "name": "我的",
                 "path": "pages/user/user",
                 "query": ""
             }
         ]
     }
 }

src/pages/cart/cart.vue

Diff comments View file @4ee9880

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<block v-if="cartList.length==0">	3	<block v-if="cartList.length==0">
4		4
5	</block>	5	</block>
6	<block v-else>	6	<block v-else>
7	<view class="card">	7	<view class="card">
8	<view class="cardHeader">	8	<view class="cardHeader">
9	<view	9	<view
10	v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"	10	v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11	@click="pClick"	11	@click="pClick"
12	>	12	>
13	<span class="correct"></span>	13	<span class="correct"></span>
14	</view>	14	</view>
15	<image	15	<image
16	src="../../static/store.png"	16	src="../../static/store.png"
17	mode="aspectFill"	17	mode="aspectFill"
18	></image>	18	></image>
19	<text>非常戴镜</text>	19	<text>非常戴镜</text>
20	</view>	20	</view>
21	<view	21	<view
22	class="cardBody"	22	class="cardBody"
23	v-for="(item,index) in cartList"	23	v-for="(item,index) in cartList"
24	:key="index"	24	:key="index"
25	@longpress="delCart(item.cart_id,index)"	25	@longpress="delCart(item.cart_id,index)"
26	>	26	>
27	<view	27	<view
28	v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"	28	v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29	@click="childClick(cartList[index],index)"	29	@click="childClick(cartList[index],index)"
30	>	30	>
31	<span class="correct"></span>	31	<span class="correct"></span>
32	</view>	32	</view>
33	<view class="imageWrap">	33	<view class="imageWrap">
34	<image	34	<image
35	:src="item.img_index_url"	35	:src="item.img_index_url"
36	mode="aspectFit"	36	mode="aspectFit"
37	style="width: 188rpx;height: 168rpx;"	37	style="width: 188rpx;height: 168rpx;"
38	></image>	38	></image>
39	</view>	39	</view>
40	<view class="goodInfo">	40	<view class="goodInfo">
41	<!-- <view class="imageWrap">	41	<!-- <view class="imageWrap">
42	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>	42	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43	</view> -->	43	</view> -->
44	<view class="infoRight">	44	<view class="infoRight">
45	<view	45	<view
46	class="goodName"	46	class="goodName"
47	@tap="toGoods(item.pid,item.sk_id)"	47	@tap="toGoods(item.pid,item.sk_id)"
48	>{{item.p_name}}</view>	48	>{{item.p_name}}</view>
49	<view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">	49	<view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
50	<view class="desL">	50	<view class="desL">
51	<view class="people">	51	<view class="people">
52	使用人：{{item.peopleName}}	52	使用人：{{item.peopleName}}
53	</view>	53	</view>
54	<view class="skuInfo">	54	<view class="skuInfo">
55	{{item.sku_name}}	55	{{item.sku_name}}
56	</view>	56	</view>
57	</view>	57	</view>
58	<view class="desR">	58	<view class="desR">
59	<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>	59	<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
60	</view>	60	</view>
61	</view>	61	</view>
62	<view class="priceBox">	62	<view class="priceBox">
63	<view class="price">￥{{item.nowPrice*item.num}}</view>	63	<view class="price">￥{{item.nowPrice*item.num}}</view>
64	<text class="maxCount">(限购{{maxCount}}副)</text>	64	<text class="maxCount">(限购{{maxCount}}副)</text>
65	<view class="counter">	65	<view class="counter">
66	<view	66	<view
67	class="btn"	67	class="btn"
68	disabled="this.addDisabled"	68	disabled="this.addDisabled"
69	type="default"	69	type="default"
70	@tap="counter(index,false,item)"	70	@tap="counter(index,false,item)"
71	>-</view>	71	>-</view>
72	<text>{{item.num}}</text>	72	<text>{{item.num}}</text>
73	<view	73	<view
74	class="btn"	74	class="btn"
75	disabled="this.desDisabled"	75	disabled="this.desDisabled"
76	type="default"	76	type="default"
77	@tap="counter(index,true,item)"	77	@tap="counter(index,true,item)"
78	>+</view>	78	>+</view>
79	</view>	79	</view>
80	</view>	80	</view>
81	</view>	81	</view>
82	</view>	82	</view>
83	</view>	83	</view>
84	</view>	84	</view>
85	</block>	85	</block>
86	<view class="footer">	86	<view class="footer">
87	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	87	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
88	<view class="footerRight">	88	<view class="footerRight">
89	<view class="paybtn" @click="toComfirmOrder">立即结算</view>	89	<view class="paybtn" @click="toComfirmOrder">立即结算</view>
90	</view>	90	</view>
91	</view>	91	</view>
92	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"	92	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
93	:index="cartIndex"	93	:index="cartIndex"
94	:pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>	94	:pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
95	</view>	95	</view>
96	</template>	96	</template>
97		97
98	<script>	98	<script>
99		99
100	import store from '@/store'	100	import store from '@/store'
101	import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';	101	import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
102	export default {	102	export default {
103	components:{	103	components:{
104	BottomSheet,	104	BottomSheet,
105	},	105	},
106	data() {	106	data() {
107	return {	107	return {
108	pid:Number,	108	pid:Number,
109	isCart:Number,	109	isCart:Number,
110	sk_id:String,	110	sk_id:String,
111	mp_id:String,	111	mp_id:String,
112	isShowBottom : false, //底部弹窗开关	112	isShowBottom : false, //底部弹窗开关
113	cart_id:Number,	113	cart_id:Number,
114	maxCount: 20,	114	maxCount: 20,
115	cartIndex:Number,	115	cartIndex:Number,
116	cartList:[]	116	cartList:[]
117	}	117	}
118	},	118	},
119	computed: {	119	computed: {
120	pIsoPen (){	120	pIsoPen (){
121	if (this.cartList.length > 0){	121	if (this.cartList.length > 0){
122	return this.cartList.find(item => !item.isChecked) ? false : true;	122	return this.cartList.find(item => !item.isChecked) ? false : true;
123	}	123	}
124	return false	124	return false
125	},	125	},
126	goodInfo () {	126	goodInfo () {
127	return this.$store.state.read.goodInfo	127	return this.$store.state.read.goodInfo
128	},	128	},
129	totalPrice() {	129	totalPrice() {
130	let totalPrice = 0	130	let totalPrice = 0
131	this.cartList.forEach((item)=>{	131	this.cartList.forEach((item)=>{
132	if(item.isChecked){	132	if(item.isChecked){
133	totalPrice += item.nowPrice * item.num;	133	totalPrice += item.nowPrice * item.num;
134	}	134	}
135	})	135	})
136	return totalPrice	136	return totalPrice
137	}	137	}
138	},	138	},
139	onLoad: async function() {	139	onShow() {
140	await this.$store.dispatch('cart/getCartList', {	140	this.cartList = this.$store.state.cart.cartList;
141	uid: this.$store.state.user.userInfo.uid, // 用户id	141	},
		142	onLoad: async function() {
		143	await this.$store.dispatch('cart/getCartList', {
		144	uid: this.$store.state.user.userInfo.uid, // 用户id
142	})	145	})
143		146
144	this.cartList = this.$store.state.cart.cartList;	147	this.cartList = this.$store.state.cart.cartList;
145	this.cartList.forEach((item)=>{	148	this.cartList.forEach((item)=>{
146	item.isChecked = false	149	item.isChecked = false
147	})	150	})
148	},	151	},
149	methods: {	152	methods: {
150	//全选按钮	153	//全选按钮
151	pClick(){	154	pClick(){
152	let pStatus = this.cartList.find(item => !item.isChecked) ? false : true	155	let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
153	let oldList = this.cartList;	156	let oldList = this.cartList;
154	oldList.forEach((item, index)=>{	157	oldList.forEach((item, index)=>{
155	item.isChecked = !pStatus	158	item.isChecked = !pStatus
156	this.cartList.splice(index,1, item)	159	this.cartList.splice(index,1, item)
157	})	160	})
158	},	161	},
159	//单选按钮	162	//单选按钮
160	childClick(type,index){	163	childClick(type,index){
161	this.cartList[index].isChecked = !this.cartList[index].isChecked	164	this.cartList[index].isChecked = !this.cartList[index].isChecked
162	//vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发	165	//vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
163	this.cartList.splice(index,1, this.cartList[index])	166	this.cartList.splice(index,1, this.cartList[index])
164	},	167	},
165	//修改购物车	168	//修改购物车
166	chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){	169	chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
167	// console.log('modi',mp_id,sk_id,price,pid,num,cart_id)	170	// console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
168	store.dispatch('cart/modiCart', {	171	store.dispatch('cart/modiCart', {
169	uid: this.$store.state.user.userInfo.uid,	172	uid: this.$store.state.user.userInfo.uid,
170	openid: this.$store.state.user.userInfo.openid,	173	openid: this.$store.state.user.userInfo.openid,
171	mp_id: mp_id,	174	mp_id: mp_id,
172	sk_id: sk_id,	175	sk_id: sk_id,
173	price: price,	176	price: price,
174	pid: pid,	177	pid: pid,
175	num: num,	178	num: num,
176	cart_id: cart_id,	179	cart_id: cart_id,
177	args: {	180	args: {
178	index: index,	181	index: index,
179	},	182	},
180	})	183	})
181	store.dispatch('cart/getCartList', {	184	store.dispatch('cart/getCartList', {
182	uid: this.$store.state.user.userInfo.uid, // 用户id	185	uid: this.$store.state.user.userInfo.uid, // 用户id
183	})	186	})
184		187
185	this.$forceUpdate()	188	this.$forceUpdate()
186	// console.log('21212121212',this.cartList)	189	// console.log('21212121212',this.cartList)
187	},	190	},
188	//底部弹窗开关	191	//底部弹窗开关
189	showBottom(isCart,pid,skId,mp_id,cart_id,index){	192	showBottom(isCart,pid,skId,mp_id,cart_id,index){
190	store.dispatch('read/fetch', {	193	store.dispatch('read/fetch', {
191	pid,	194	pid,
192	sk_id: skId,	195	sk_id: skId,
193	}).then(()=>{	196	}).then(()=>{
194	this.cartIndex = index	197	this.cartIndex = index
195	this.sk_id = skId;	198	this.sk_id = skId;
196	this.pid = pid;	199	this.pid = pid;
197	this.mp_id = mp_id;	200	this.mp_id = mp_id;
198	this.isCart = isCart;	201	this.isCart = isCart;
199	this.cart_id = cart_id;	202	this.cart_id = cart_id;
200	this.isShowBottom = true;	203	this.isShowBottom = true;
201	})	204	})
202	},	205	},
203	closeBottom(){	206	closeBottom(){
204	this.isShowBottom = false;	207	this.isShowBottom = false;
205	},	208	},
206	toGoods(id, sk_id) {	209	toGoods(id, sk_id) {
207	uni.navigateTo({	210	uni.navigateTo({
208	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,	211	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
209	success: res => {},	212	success: res => {},
210	fail: () => {},	213	fail: () => {},
211	complete: () => {},	214	complete: () => {},
212	})	215	})
213	},	216	},
214	toComfirmOrder(){	217	toComfirmOrder(){
215	uni.navigateTo({	218	this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
216	url:`../confirmOrder/confirmOrder`,	219	uni.navigateTo({
217	})	220	url:`../confirmOrder/confirmOrder?isCart=true`,
218	},	221	})
219	counter(index, isadd, item) {	222	},
220	// console.log('item=====>', item)	223	counter(index, isadd, item) {
221	// console.log('num=====>', item.num)	224	// console.log('item=====>', item)
222	const nums = parseInt(item.num)	225	// console.log('num=====>', item.num)
223	if (isadd) {	226	const nums = parseInt(item.num)
224	if (nums >= this.maxCount) {	227	if (isadd) {
225	this.addDisabled = true	228	if (nums >= this.maxCount) {
226	} else {	229	this.addDisabled = true
227	this.addDisabled = true	230	} else {
228	store.dispatch('cart/modiCart', {	231	this.addDisabled = true
229	uid: this.$store.state.user.userInfo.uid,	232	store.dispatch('cart/modiCart', {
230	openid: this.$store.state.user.userInfo.openid,	233	uid: this.$store.state.user.userInfo.uid,
231	mp_id: item.mp_id,	234	openid: this.$store.state.user.userInfo.openid,
232	sk_id: item.sk_id,	235	mp_id: item.mp_id,
233	price: item.nowPrice,	236	sk_id: item.sk_id,
234	pid: item.pid,	237	price: item.nowPrice,
235	num: nums + 1,	238	pid: item.pid,
236	cart_id: item.cart_id,	239	num: nums + 1,
237	args: {	240	cart_id: item.cart_id,
238	index: index,	241	args: {
239	isadd: isadd,	242	index: index,
240	},	243	isadd: isadd,
241	})	244	},
242	this.addDisabled = false	245	})
243	}	246	this.addDisabled = false
244	} else {	247	}
245	if (nums <= 1) {	248	} else {
246	this.desDisabled = true	249	if (nums <= 1) {
247	} else {	250	this.desDisabled = true
248	this.desDisabled = false	251	} else {
249		252	this.desDisabled = false
250	store.dispatch('cart/modiCart', {	253
251	uid: this.$store.state.user.userInfo.uid,	254	store.dispatch('cart/modiCart', {
252	openid: this.$store.state.user.userInfo.openid,	255	uid: this.$store.state.user.userInfo.uid,
253	mp_id: item.mp_id,	256	openid: this.$store.state.user.userInfo.openid,
254	sk_id: item.sk_id,	257	mp_id: item.mp_id,
255	price: item.nowPrice,	258	sk_id: item.sk_id,
256	pid: item.pid,	259	price: item.nowPrice,
257	num: nums - 1,	260	pid: item.pid,
258	cart_id: item.cart_id,	261	num: nums - 1,
259	args: {	262	cart_id: item.cart_id,
260	index: index,	263	args: {
261	isadd: isadd,	264	index: index,
262	},	265	isadd: isadd,
263	})	266	},
264	this.desDisabled = true	267	})
265	}	268	this.desDisabled = true
266	}	269	}
267		270	}
268	},	271
269	delCart(cart_id, index) {	272	},
270	cart_id = parseInt(cart_id)	273	delCart(cart_id, index) {
271	uni.showModal({	274	cart_id = parseInt(cart_id)
272	title: '是否删除该商品',	275	uni.showModal({
273	success: function (res) {	276	title: '是否删除该商品',
274	if (res.confirm) {	277	success: function (res) {
275		278	if (res.confirm) {
276	store.dispatch('cart/delCart', {	279	store.dispatch('cart/delCart', {
277	uid: this.$store.state.user.userInfo.uid,	280	uid: this.$store.state.user.userInfo.uid,
278	openid: this.$store.state.user.userInfo.openid,	281	openid: this.$store.state.user.userInfo.openid,
279	cart_id: cart_id, // 要修改的购物车id	282	cart_id: cart_id, // 要修改的购物车id
280	arg: index, // 由于action 传参是能接收两参数，因此将index放入对象	283	arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
281	})	284	})
282	}	285	}
283	}.bind(this),	286	}.bind(this),
284	})	287	})
285	},	288	// this.cartList.splice(index,1)
286	},	289	},
287	}	290	},
288	</script>	291	}
289		292	</script>
290	<style lang="scss">	293
291	.content {	294	<style lang="scss">
292	min-height: 100vh;	295	.content {
293	background-color: #f2f2f2;	296	min-height: 100vh;
294	display: flex;	297	background-color: #f2f2f2;
295	flex-direction: column;	298	display: flex;
296	align-items: center;	299	flex-direction: column;
297	justify-content: space-between;	300	align-items: center;
298	padding: 20rpx 40rpx;	301	justify-content: space-between;
299	box-sizing: border-box;	302	padding: 20rpx 40rpx;
300		303	box-sizing: border-box;
301	.partentCheck {	304
302	width: 16px;	305	.partentCheck {
303	height: 16px;	306	width: 16px;
304	border-radius: 22px;	307	height: 16px;
305	border: 1px solid #cfcfcf;	308	border-radius: 22px;
306	background-color: #ffffff;	309	border: 1px solid #cfcfcf;
307	margin: 24rpx 12rpx 24rpx 24rpx;	310	background-color: #ffffff;
308	}	311	margin: 24rpx 12rpx 24rpx 24rpx;
309	.partentChecked {	312	}
310	width: 18px;	313	.partentChecked {
311	height: 18px;	314	width: 18px;
312	border-radius: 22px;	315	height: 18px;
313	background-color: #ff6b4a;	316	border-radius: 22px;
314	margin: 24rpx 12rpx 24rpx 24rpx;	317	background-color: #ff6b4a;
315	.correct {	318	margin: 24rpx 12rpx 24rpx 24rpx;
316	display: inline-block;	319	.correct {
317	position: relative;	320	display: inline-block;
318	width: 10rpx;	321	position: relative;
319	height: 2rpx;	322	width: 10rpx;
320	background: #ffffff;	323	height: 2rpx;
321	line-height: 0;	324	background: #ffffff;
322	font-size: 0;	325	line-height: 0;
323	position: relative;	326	font-size: 0;
324	top: -7px;	327	position: relative;
325	left: 4px;	328	top: -7px;
326	-webkit-transform: rotate(45deg);	329	left: 4px;
327	}	330	-webkit-transform: rotate(45deg);
328	.correct:after {	331	}
329	content: "/";	332	.correct:after {
330	display: block;	333	content: "/";
331	width: 16rpx;	334	display: block;
332	height: 2rpx;	335	width: 16rpx;
333	background: #ffffff;	336	height: 2rpx;
334	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);	337	background: #ffffff;
335	}	338	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
336	}	339	}
337		340	}
338	.card {	341
339	background-color: #ffffff;	342	.card {
340	border-radius: 16rpx;	343	background-color: #ffffff;
341	box-sizing: border-box;	344	border-radius: 16rpx;
342	padding: 36rpx 36rpx 36rpx 18rpx;	345	box-sizing: border-box;
343	display: flex;	346	padding: 36rpx 36rpx 36rpx 18rpx;
344	flex-direction: column;	347	display: flex;
345	align-items: center;	348	flex-direction: column;
346	justify-content: space-between;	349	align-items: center;
347	margin-bottom: 180rpx;	350	justify-content: space-between;
348	.cardHeader {	351	margin-bottom: 180rpx;
349	width: 100%;	352	.cardHeader {
350	height: 36rpx;	353	width: 100%;
351	display: flex;	354	height: 36rpx;
352	align-items: center;	355	display: flex;
353	justify-content: flex-start;	356	align-items: center;
354	margin-bottom: 20rpx;	357	justify-content: flex-start;
355	image {	358	margin-bottom: 20rpx;
356	height: 32rpx;	359	image {
357	width: 32rpx;	360	height: 32rpx;
358	padding-left: 6px;	361	width: 32rpx;
359	padding-right: 10px;	362	padding-left: 6px;
360	}	363	padding-right: 10px;
361	text {	364	}
362	// font-family: PingFangSC-Regular;	365	text {
363	font-size: 14px;	366	// font-family: PingFangSC-Regular;
364	color: #333333;	367	font-size: 14px;
365	letter-spacing: -0.26px;	368	color: #333333;
366	}	369	letter-spacing: -0.26px;
367	}	370	}
368	.cardBody {	371	}
369	width: 100%;	372	.cardBody {
370	min-height: 300rpx;	373	width: 100%;
371	display: flex;	374	min-height: 300rpx;
372	align-items: center;	375	display: flex;
373	justify-content: space-between;	376	align-items: center;
374	.goodInfo {	377	justify-content: space-between;
375	width: 390rpx;	378	.goodInfo {
376	display: flex;	379	width: 390rpx;
377	flex-direction: row;	380	display: flex;
378	justify-content: flex-start;	381	flex-direction: row;
379	padding-left: 6px;	382	justify-content: flex-start;
380		383	padding-left: 6px;
381	.imageWrap {	384
382	height: 188rpx;	385	.imageWrap {
383	width: 188rpx;	386	height: 188rpx;
384	margin-right: 28rpx;	387	width: 188rpx;
385		388	margin-right: 28rpx;
386	image {	389
387	border-radius: 4px;	390	image {
388	height: 188rpx;	391	border-radius: 4px;
389	width: 188rpx;	392	height: 188rpx;
390	}	393	width: 188rpx;
391	}	394	}
392	.infoRight {	395	}
393	display: flex;	396	.infoRight {
394	flex-direction: column;	397	display: flex;
395	align-items: flex-start;	398	flex-direction: column;
396	justify-content: space-between;	399	align-items: flex-start;
397	min-height: 240rpx;	400	justify-content: space-between;
398	width: 100%;	401	min-height: 240rpx;
399	.goodName {	402	width: 100%;
400	display: -webkit-box;	403	.goodName {
401	-webkit-box-orient: vertical;	404	display: -webkit-box;
402	-webkit-line-clamp: 2;	405	-webkit-box-orient: vertical;
403	text-align: justify;	406	-webkit-line-clamp: 2;
404	overflow: hidden;	407	text-align: justify;
405	font-size: 28rpx;	408	overflow: hidden;
406	color: #333333;	409	font-size: 28rpx;
407	}	410	color: #333333;
408	.describ {	411	}
409	width: 100%;	412	.describ {
410	min-height: 80rpx;	413	width: 100%;
411	background: #F9F9F9;	414	min-height: 80rpx;
412	border-radius: 2px;	415	background: #F9F9F9;
413	box-sizing: border-box;	416	border-radius: 2px;
414	padding: 10rpx;	417	box-sizing: border-box;
415	font-size: 20rpx;	418	padding: 10rpx;
416	letter-spacing: -0.23px;	419	font-size: 20rpx;
417	color: #999999;	420	letter-spacing: -0.23px;
418	display: flex;	421	color: #999999;
419	justify-content: space-between;	422	display: flex;
420	align-items: center;	423	justify-content: space-between;
421	.desL{	424	align-items: center;
422		425	.desL{
423	view{	426
424	margin: 10rpx 0 10rpx 0 ;	427	view{
425	}	428	margin: 10rpx 0 10rpx 0 ;
426	}	429	}
427		430	}
428	}	431
429	.priceBox {	432	}
430	display: flex;	433	.priceBox {
431	justify-content: space-between;	434	display: flex;
432	align-items: center;	435	justify-content: space-between;
433	// margin-top: 26px;	436	align-items: center;
434	width: 100%;	437	// margin-top: 26px;
435	font-size: 14px;	438	width: 100%;
436	color: #999999;	439	font-size: 14px;
437	.maxCount {	440	color: #999999;
438	color: #999999;	441	.maxCount {
439	font-size: 20rpx;	442	color: #999999;
440	}	443	font-size: 20rpx;
441	.price {	444	}
442	color: #ff6b4a;	445	.price {
443	font-size: 28rpx;	446	color: #ff6b4a;
444	}	447	font-size: 28rpx;
445	.counter {	448	}
446	display: flex;	449	.counter {
447	flex-direction: row;	450	display: flex;
448	justify-content: space-between;	451	flex-direction: row;
449	align-items: center;	452	justify-content: space-between;
450	font-size: 28rpx;	453	align-items: center;
451	color: #333333;	454	font-size: 28rpx;
452	width: 122rpx;	455	color: #333333;
453	.btn {	456	width: 122rpx;
454	display: flex;	457	.btn {
455	justify-content: center;	458	display: flex;
456	line-height: 32rpx;	459	justify-content: center;
457	height: 32rpx;	460	line-height: 32rpx;
458	width: 32rpx;	461	height: 32rpx;
459	background-color: #f2f2f2;	462	width: 32rpx;
460	color: #cfcfcf;	463	background-color: #f2f2f2;
461	}	464	color: #cfcfcf;
462	}	465	}
463	}	466	}
464	}	467	}
465	}	468	}
466	}	469	}
467	}	470	}
468	.footer {	471	}
469	position: fixed;	472	.footer {
470	left: 0;	473	position: fixed;
471	bottom: 0px;	474	left: 0;
472	height: 112rpx;	475	bottom: 0px;
473	width: 100%;	476	height: 112rpx;
474	background-color: #ffffff;	477	width: 100%;
475	font-size: 16px;	478	background-color: #ffffff;
476	display: flex;	479	font-size: 16px;
477	justify-content: space-between;	480	display: flex;
478	align-items: center;	481	justify-content: space-between;
479	.footerLeft {	482	align-items: center;
480	display: flex;	483	.footerLeft {
481	justify-content: center;	484	display: flex;
482	align-items: center;	485	justify-content: center;
483	width: 50%;	486	align-items: center;
484	color: #333333;	487	width: 50%;
485	text {	488	color: #333333;
486	color: #ff6b4a;	489	text {
487	}	490	color: #ff6b4a;
488	}	491	}
489	.footerRight {	492	}
490	display: flex;	493	.footerRight {
491	justify-content: flex-end;	494	display: flex;
492	align-items: center;	495	justify-content: flex-end;
493	width: 50%;	496	align-items: center;
494	margin-right: 26rpx;	497	width: 50%;
495	.paybtn {	498	margin-right: 26rpx;
496	display: flex;	499	.paybtn {
497	justify-content: center;	500	display: flex;
498	align-items: center;	501	justify-content: center;
499	background: #ff6b4a;	502	align-items: center;
500	border-radius: 20px;	503	background: #ff6b4a;
501	border-radius: 20px;	504	border-radius: 20px;
502	color: #ffffff;	505	border-radius: 20px;
503	width: 204rpx;	506	color: #ffffff;
504	height: 80rpx;	507	width: 204rpx;
505	}	508	height: 80rpx;
506	}	509	}
507	}	510	}
508	}	511	}
509	/* 隐藏滚动条 */	512	}
510	::-webkit-scrollbar {	513	/* 隐藏滚动条 */
511	width: 0;	514	::-webkit-scrollbar {
512	height: 0;	515	width: 0;
513	color: transparent;	516	height: 0;
514	}	517	color: transparent;
515	</style>	518	}
		519	</style>

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @4ee9880

1	<template>	1	<template>
2	<view class="wrap">	2	<view class="wrap">
3	<view></view>	3	<view></view>
4	<view	4	<view
5	class="addAddress"	5	class="addAddress"
6	@tap="toaddAddress"	6	@tap="toaddAddress"
7	v-if="this.showAddress"	7	v-if="this.showAddress"
8	>	8	>
9	<view class="addIcon">	9	<view class="addIcon">
10	<image	10	<image
11	src="../../static/add.png"	11	src="../../static/add.png"
12	mode="aspectFill"	12	mode="aspectFill"
13	></image>	13	></image>
14	</view>	14	</view>
15	<view class="addressText">{{addAddress}}</view>	15	<view class="addressText">{{addAddress}}</view>
16	<image	16	<image
17	src="../../static/right.png"	17	src="../../static/right.png"
18	mode="aspectFill"	18	mode="aspectFill"
19	></image>	19	></image>
20	</view>	20	</view>
21	<view	21	<view
22	v-else	22	v-else
23	@tap="toaddAddress"	23	@tap="toaddAddress"
24	class="list order-user"	24	class="list order-user"
25	>	25	>
26	<view class="order-user-head">	26	<view class="order-user-head">
27	<view class="name">	27	<view class="name">
28	<view	28	<view
29	v-if="addressInfo.default === '1'"	29	v-if="addressInfo.default === '1'"
30	class="default"	30	class="default"
31	><text>默认</text></view>{{addressInfo.name}}	31	><text>默认</text></view>{{addressInfo.name}}
32	</view>	32	</view>
33	<text class="mobile">{{addressInfo.mobile}}</text>	33	<text class="mobile">{{addressInfo.mobile}}</text>
34	</view>	34	</view>
35	<view class="order-user-body">	35	<view class="order-user-body">
36	<image src="../../static/myorder-paying-location.png"></image>	36	<image src="../../static/myorder-paying-location.png"></image>
37	<text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>	37	<text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
38	</view>	38	</view>
39	<image	39	<image
40	class="arrow"	40	class="arrow"
41	src="../../static/right.png"	41	src="../../static/right.png"
42	mode="aspectFill"	42	mode="aspectFill"
43	></image>	43	></image>
44	</view>	44	</view>
45	<view class="content">	45	<view class="content">
46	<view class="orderInfo">	46	<view class="orderInfo">
47	<view class="title">	47	<view class="title">
48	<image	48	<image
49	src="../../static/store.png"	49	src="../../static/store.png"
50	mode="aspectFill"	50	mode="aspectFill"
51	style="width: 40rpx;height: 40rpx;"	51	style="width: 40rpx;height: 40rpx;"
52	></image>	52	></image>
53	<text>非常戴镜</text>	53	<text>非常戴镜</text>
54	</view>	54	</view>
55	<view class="infoBox">	55
		56	<view class="infoBox" v-if="isCart == 'true'" v-for="(item, index) in checkedCartLst" :key="index">
		57	<view class="infoTop">
		58	<image
		59	:src="item.img_index_url"
		60	mode="aspectFill"
		61	></image>
		62	<view class="infoRight">
		63	<text class="goodName">{{item.p_name}}</text>
		64	<text class="remarks">支持7天无理由退货顺丰发货</text>
		65	<view class="priceBox">
		66	<view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
		67	¥{{item.oldPrice*item.num}}
		68	</text></view>
		69	<view class="counter">
		70	<view
		71	class="btn"
		72	disabled="this.disabled"
		73	type="default"
		74	@click="counter(false,index)"
		75	>-</view>
		76	<text>{{checkedCartLst[index].num}}</text>
		77	<view
		78	class="btn"
		79	type="default"
		80	@click="counter(true,index)"
		81	>+</view>
		82	</view>
		83	</view>
		84	</view>
		85	</view>
		86	<view class="infoBottom">
		87	<view class="norm">规格 <text>
		88	<!-- 长度超出变省略号未做 -->
		89	<block >{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
		90	</block>
		91	</text></view>
		92	<view class="shippingMethod">使用人 <text>
		93	{{item.peopleName}}
		94	</text></view>
		95	<view class="shippingMethod">配送方式 <text>快递</text></view>
		96	<view class="message">买家留言
		97	<input
		98	type="text"
		99	:value="note"
		100	placeholder="建议提前协商(50字以内)"
		101	/>
		102	</view>
		103	</view>
		104	</view>
		105
		106	<view class="infoBox" v-if="isCart !== 'true'">
56	<view class="infoTop">	107	<view class="infoTop">
57	<image	108	<image
58	:src="goodInfo.img_index_url"	109	:src="buyItem.pic"
59	mode="aspectFill"	110	mode="aspectFill"
60	></image>	111	></image>
61	<view class="infoRight">	112	<view class="infoRight">
62	<text class="goodName">{{goodInfo.p_name}}</text>	113	<text class="goodName">{{goodInfo.p_name}}</text>
63	<text class="remarks">支持7天无理由退货顺丰发货</text>	114	<text class="remarks">支持7天无理由退货顺丰发货</text>
64	<view class="priceBox">	115	<view class="priceBox">
65	<view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">	116	<view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
66	¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}	117	¥{{buyItem.out_price * count}}
67	</text></view>	118	</text></view>
68	<view class="counter">	119	<view class="counter">
69	<view	120	<view
70	class="btn"	121	class="btn"
71	disabled="this.disabled"	122	disabled="this.disabled"
72	type="default"	123	type="default"
73	@click="counter(false)"	124	@click="counter(false)"
74	>-</view>	125	>-</view>
75	<text>{{count}}</text>	126	<text>{{count}}</text>
76	<view	127	<view
77	class="btn"	128	class="btn"
78	type="default"	129	type="default"
79	@click="counter(true)"	130	@click="counter(true)"
80	>+</view>	131	>+</view>
81	</view>	132	</view>
82	</view>	133	</view>
83	</view>	134	</view>
84	</view>	135	</view>
85	<view class="infoBottom">	136	<view class="infoBottom">
86	<view class="norm">规格 <text>	137	<view class="norm">规格 <text>
87	<!-- 长度超出变省略号未做 -->	138	<!-- 长度超出变省略号未做 -->
88	<block	139	<block
89	v-for="(item, index) in current"	140	v-for="(item, index) in current"
90	:key="index"	141	:key="index"
91	>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>	142	>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
92	</block>	143	</block>
93	</text></view>	144	</text></view>
94	<view class="shippingMethod">使用人 <text>	145	<view class="shippingMethod">使用人 <text>
95	{{name}}	146	{{name}}
96	</text></view>	147	</text></view>
97	<view class="shippingMethod">配送方式 <text>快递</text></view>	148	<view class="shippingMethod">配送方式 <text>快递</text></view>
98	<view class="message">买家留言	149	<view class="message">买家留言
99	<input	150	<input
100	type="text"	151	type="text"
101	:value="note"	152	:value="note"
102	placeholder="建议提前协商(50字以内)"	153	placeholder="建议提前协商(50字以内)"
103	/>	154	/>
104	</view>	155	</view>
105	</view>	156	</view>
106	</view>	157	</view>
107	</view>	158	</view>
108	<view class="payWay">	159	<view class="payWay">
109	<view class="item">	160	<view class="item">
110	<text>支付方式</text>	161	<text>支付方式</text>
111	<view class="itemRight">	162	<view class="itemRight">
112	<view class="rightText">	163	<view class="rightText">
113	<view class="choosePayWay">	164	<view class="choosePayWay">
114	<image	165	<image
115	src="../../static/chat_logo.png"	166	src="../../static/chat_logo.png"
116	mode="aspectFill"	167	mode="aspectFill"
117	></image>	168	></image>
118	<text>微信支付</text>	169	<text>微信支付</text>
119	</view>	170	</view>
120	<!-- <view class="randomSubstraction">最高随机立减￥99</view> -->	171	<!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
121	</view>	172	</view>
122	<!-- <image	173	<!-- <image
123	src="../../static/right.png"	174	src="../../static/right.png"
124	mode="aspectFill"	175	mode="aspectFill"
125	></image> -->	176	></image> -->
126	</view>	177	</view>
127	</view>	178	</view>
128	<!-- <view class="item">	179	<!-- <view class="item">
129	<text>优惠券</text>	180	<text>优惠券</text>
130	<view class="itemRight">	181	<view class="itemRight">
131	<view class="rightText">	182	<view class="rightText">
132	<view class="chooseOffers">	183	<view class="chooseOffers">
133	<text>-￥70.00</text>	184	<text>-￥70.00</text>
134	</view>	185	</view>
135	<view class="preferentialWay">最大优惠</view>	186	<view class="preferentialWay">最大优惠</view>
136	</view>	187	</view>
137	<image	188	<image
138	src="../../static/right.png"	189	src="../../static/right.png"
139	mode="aspectFill"	190	mode="aspectFill"
140	></image>	191	></image>
141	</view>	192	</view>
142	</view> -->	193	</view> -->
143	<view class="item">	194	<view class="item">
144	<text>运费</text>	195	<text>运费</text>
145	<view class="itemRight">	196	<view class="itemRight">
146	<view class="freight">免运费</view>	197	<view class="freight">免运费</view>
147	</view>	198	</view>
148	</view>	199	</view>
149	<view class="item">	200	<view class="item">
150	<text>合计</text>	201	<text>合计</text>
151	<view class="itemRight">	202	<view class="itemRight">
152	<view class="total">¥{{Number(skuInfo.real_price) * count}}</view>	203	<view class="total">¥{{totalPrice}}</view>
		204	<!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
153	</view>	205	</view>
154	</view>	206	</view>
155	</view>	207	</view>
156	<!--	208	<!--
157	<view class="checkBox">	209	<view class="checkBox">
158	<checkbox-group>	210	<checkbox-group>
159	<label>	211	<label>
160	<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买	212	<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
161	</label>	213	</label>
162	</checkbox-group>	214	</checkbox-group>
163	</view> -->	215	</view> -->
164	</view>	216	</view>
165	<view class="last_zhanwei"></view>	217	<view class="last_zhanwei"></view>
166	<view class="footer">	218	<view class="footer">
167	<view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>	219	<view class="footerLeft">实付金额:
		220	<text >¥{{totalPrice}}</text>
		221	<!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
		222	</view>
168	<view class="footerRight">	223	<view class="footerRight">
169	<view	224	<view
170	class="paybtn"	225	class="paybtn"
171	@tap="orderBuild"	226	@tap="orderBuild"
172	>立即支付</view>	227	>立即支付</view>
173	</view>	228	</view>
174	</view>	229	</view>
175	</view>	230	</view>
176	</template>	231	</template>
177		232
178	<script>	233	<script>
179	import store from '@/store'	234	import store from '@/store'
180	import MD5Util from '../../utils/md5'	235	import MD5Util from '../../utils/md5'
181		236
182	export default {	237	export default {
183	data() {	238	data() {
184	return {	239	return {
185	name:String,	240	name:String,
186	addAddress: '添加收货地址',	241	addAddress: '添加收货地址',
187	count: 1,	242	count: 1,
188	pid: 0,	243	pid: 0,
189	disabled: false,	244	disabled: false,
190	freight: 0.0,	245	freight: 0.0,
191	showAddress: false,	246	showAddress: false,
192	note: '',	247	note: '',
193	addressInfo: {	248	addressInfo: {
194	address: '',	249	address: '',
195	},	250	},
		251	isCart:Boolean,
196	// isAnonymous:	252	// isAnonymous:
		253	checkedCartLst:[]
197	}	254	}
198	},	255	},
199	onShow(addressId) {	256	onShow(addressId) {
200	// console.log('+-+---+-+',addressId)	257	// console.log('+-+---+-+',addressId)
201	if (addressId) {	258	if (addressId) {
202	store	259	store
203	.dispatch('address/details', {	260	.dispatch('address/details', {
204	add_id: addressId,	261	add_id: addressId,
205	})	262	})
206	.then(({ code, data }) => {	263	.then(({ code, data }) => {
207	if (code === 1) {	264	if (code === 1) {
208	// console.log('code', code, data)	265	// console.log('code', code, data)
209	this.showAddress = true	266	this.showAddress = true
210	this.addressInfo = data	267	this.addressInfo = data
211	}	268	}
212	})	269	})
213	}	270	}
214	},	271	},
215	onLoad({ pid, addressId,isCart ,count,name}) {	272	onLoad({ pid, addressId,isCart ,count,name}) {
216	this.pid = pid;	273	if(isCart == 'false'){
		274
		275	this.pid = pid;
		276	store.dispatch('read/fetch', {
		277	pid,
		278	})
		279	}
217	this.count = count;	280	this.count = count;
218	this.name = name;	281	this.name = name;
219	store.dispatch('read/fetch', {	282	this.isCart = isCart;
220	pid,	283
221	})	284	console.log('++++++++++++'+pid,addressId,isCart)
222	console.log('++++++++++++'+pid,addressId,isCart,count)	285	this.checkedCartLst = this.$store.state.cart.checkedCartLst
		286	// console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
223	// 若已经选择地址	287	// 若已经选择地址
224	if (addressId) {	288	if (addressId) {
225	store	289	store
226	.dispatch('address/details', {	290	.dispatch('address/details', {
227	add_id: addressId,	291	add_id: addressId,
228	})	292	})
229	.then(({ code, data }) => {	293	.then(({ code, data }) => {
230	if (code === 1) {	294	if (code === 1) {
231	console.log('code', code, data)	295	// console.log('code', code, data)
232	this.showAddress = true	296	this.showAddress = true
233	this.addressInfo = data	297	this.addressInfo = data
234	}	298	}
235	})	299	})
236	} else {	300	} else {
237	store.dispatch('address/default').then(({ code, data }) => {	301	store.dispatch('address/default').then(({ code, data }) => {
238	if (code === 1) {	302	if (code === 1) {
239	console.log('code', code, data)	303	// console.log('code', code, data)
240	this.showAddress = true	304	this.showAddress = true
241	this.addressInfo = data	305	this.addressInfo = data
242	}	306	}
243	})	307	})
244	}	308	}
245	},	309	},
246	computed: {	310	computed: {
		311	totalPrice(){
		312	if(this.isCart == 'true'){
		313	let total = 0
		314	this.$store.state.cart.checkedCartLst.map(item =>{
		315	total += item.nowPrice*item.num
		316	})
		317	return total
		318	}else{
		319	return this.buyItem.real_price* this.count
		320	}
		321	},
		322	buyItem(){
		323	return this.$store.state.cart.buyItem
		324	},
		325	// checkedCartLst(){
		326	// console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
		327	// return this.$store.state.cart.checkedCartLst
		328	// },
247	goodInfo() {	329	goodInfo() {
248	console.log('state', this.$store.state.read.goodInfo)	330	console.log('state', this.$store.state.read.goodInfo)
249	return this.$store.state.read.goodInfo	331	return this.$store.state.read.goodInfo
250	},	332	},
251	skuInfo() {	333	skuInfo() {
252	return this.$store.state.order.param.sk_id_arr	334	return this.$store.state.order.param.sk_id_arr
253	},	335	},
254	attrList() {	336	attrList() {
255	return this.$store.state.order.param.attrList	337	return this.$store.state.order.param.attrList
256	},	338	},
257	current() {	339	current() {
258	return this.$store.state.order.param.current	340	return this.$store.state.order.param.current
259	},	341	},
260	},	342	},
261	methods: {	343	methods: {
262	counter(isadd) {	344	counter(isadd,index) {
263	if (isadd) {	345	if (isadd) {
264	this.count++	346	if(this.isCart =='true'){
		347	this.checkedCartLst[index].num++
		348	}else{
		349	this.count++
		350	}
265	} else {	351	} else {
266	this.count <= 1 ? (this.disabled = true) : this.count--	352	if(this.isCart =='true'){
		353	this.checkedCartLst[index].num<= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
		354	}else{
		355	this.count <= 1 ? (this.disabled = true) : this.count--
		356	}
267	}	357	}
268	},	358	},
269	// 跳转添加地址页面	359	// 跳转添加地址页面
270	toaddAddress() {	360	toaddAddress() {
271	uni.navigateTo({	361	uni.navigateTo({
272	url: `../address/addressList?edit=${1}`,	362	url: `../address/addressList?edit=${1}`,
273	success: res => {},	363	success: res => {},
274	fail: error => {	364	fail: error => {
275	console.log('跳转到地址列表页面失败====>', error)	365	console.log('跳转到地址列表页面失败====>', error)
276	},	366	},
277	complete: () => {},	367	complete: () => {},
278	})	368	})
279	},	369	},
280	// 下单	370	// 下单
281	orderBuild() {	371	orderBuild() {
282	uni.showLoading({	372	uni.showLoading({
283	title: '支付中',	373	title: '支付中',
284	})	374	})
285	console.log('this', this.$store.state)	375	if(this.isCart == 'true'){
286	const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param	376	const checkedGoods = []
287	store.dispatch('order/buyNow', {	377	const sk_id_arr = []
288	pid: skId.pid,	378	this.checkedCartLst.map(item=>{
289	sk_id: skId.sk_id,	379	checkedGoods.push(item.pid)
290	number: this.count,	380	sk_id_arr.push(item.sk_id)
291	mp_id: mpId,	381	})
292	address: JSON.stringify(this.addressInfo),	382	store.dispatch('order/build', {
293	totalPrice: Number(this.skuInfo.real_price) * this.count * 100,	383	uid: this.$store.state.user.userInfo.uid,
294	liuyan: this.note,	384	address: JSON.stringify(this.addressInfo),
295	dir: 1,	385	checkedGoods:checkedGoods,
296	}).then((res) => {	386	sk_id_arr: sk_id_arr,
297	this.pay(res.data)	387	totalPrice: this.totalPrice,
298	})	388	}).then((res) => {
		389	this.pay(res.data)
		390	})
		391	}
		392	if(this.isCart == 'false'){
		393	const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
		394	store.dispatch('order/buyNow', {
		395	pid: skId.pid,
		396	sk_id: skId.sk_id,
		397	number: this.count,
		398	mp_id: mpId,
		399	address: JSON.stringify(this.addressInfo),
		400	totalPrice: this.totalPrice,
		401	liuyan: this.note,
		402	dir: 1,
		403	}).then((res) => {
		404	this.pay(res.data)
		405	})
		406	}
299	},	407	},
300	// 支付	408	// 支付
301	pay(res) {	409	pay(res) {
302	console.log('pay', res)	410	console.log('pay', res)
303	const { data, exKeyName: keyName } = res	411	const { data, exKeyName: keyName } = res
304	const uid = uni.getStorageSync('uid')	412	const uid = uni.getStorageSync('uid')
305	const timeStamp = new Date().getTime().toString()	413	const timeStamp = new Date().getTime().toString()
306	const nonceStr = 'asfafasfasfasfasf'	414	const nonceStr = 'asfafasfasfasfasf'
307	// 支付参数	415	// 支付参数
308	const fieldSet = {	416	const fieldSet = {
309	openid: this.$store.state.user.userInfo.openid,	417	openid: this.$store.state.user.userInfo.openid,
310	uid: this.$store.state.user.userInfo.uid,	418	uid: this.$store.state.user.userInfo.uid,
311	shopid: 0,	419	shopid: 0,
312	payCate: 2020,	420	payCate: 2020,
313	payMoney: Number(this.skuInfo.real_price) * this.count * 100,	421	payMoney: this.totalPrice,
314	payWoodId: `fcdj-${uid}-${keyName}`,	422	payWoodId: `fcdj-${uid}-${keyName}`,
315	payWoodDesc: '在【非常戴镜】的微信付款凭证',	423	payWoodDesc: '在【非常戴镜】的微信付款凭证',
316	nonceStr,	424	nonceStr,
317	signType: 'MD5',	425	signType: 'MD5',
318	app_uid: 2020,	426	app_uid: 2020,
319	timeStamp,	427	timeStamp,
320	keyname: keyName,	428	keyname: keyName,
321	billInfo: JSON.stringify(data),	429	billInfo: JSON.stringify(data),
322	}	430	}
323	// 请求后台支付接口	431	// 请求后台支付接口
324	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {	432	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
325	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {	433	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
326	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`	434	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
327	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'	435	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
328		436
329	// 微信支付接口	437	// 微信支付接口
330	uni.requestPayment({	438	uni.requestPayment({
331	appId: data.appid,	439	appId: data.appid,
332	timeStamp,	440	timeStamp,
333	nonceStr,	441	nonceStr,
334	total_fee: Number(this.skuInfo.real_price) * this.count * 100,	442	total_fee: this.totalPrice,
335	package: `prepay_id=${data.prepay_id}`,	443	package: `prepay_id=${data.prepay_id}`,
336	signType: 'MD5',	444	signType: 'MD5',
337	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),	445	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
338	success: (res) => {	446	success: (res) => {
339	// 支付成功	447	// 支付成功
340	uni.showModal({	448	uni.showModal({
341	content: '支付成功',	449	content: '支付成功',
342	showCancel: false,	450	showCancel: false,
343	})	451	})
344	// 跳转订单详情页->状态待收货	452	// 跳转订单详情页->状态待收货
345	uni.reLaunch({	453	uni.reLaunch({
346	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,	454	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,
347	})	455	})
348	},	456	},
349	fail: (res) => {	457	fail: (res) => {
350	// 支付失败	458	// 支付失败
351	uni.showModal({	459	uni.showModal({
352	content: '支付失败',	460	content: '支付失败',
353	showCancel: false,	461	showCancel: false,
354	})	462	})
355	// 跳转订单详情页->状态待付款	463	// 跳转订单详情页->状态待付款
356	uni.reLaunch({	464	uni.reLaunch({
357	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,	465	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,
358	})	466	})
359	},	467	},
360	complete: () => {	468	complete: () => {
361	uni.hideLoading()	469	uni.hideLoading()
362	},	470	},
363	})	471	})
364	} else {	472	} else {
365	uni.showModal({	473	uni.showModal({
366	content: '支付失败',	474	content: '支付失败',
367	showCancel: false,	475	showCancel: false,
368	})	476	})
369	console.log('支付失败')	477	console.log('支付失败')
370	uni.hideLoading()	478	uni.hideLoading()
371	}	479	}
372	})	480	})
373	},	481	},
374	},	482	},
375	}	483	}
376	</script>	484	</script>
377		485
378	<style lang="scss">	486	<style lang="scss">
379	.wrap {	487	.wrap {
380	height: 100vh;	488	height: 100vh;
381	background-color: #f2f2f2;	489	background-color: #f2f2f2;
382	font-family: PingFangSC-Regular;	490	font-family: PingFangSC-Regular;
383	letter-spacing: -0.23px;	491	letter-spacing: -0.23px;
384	position: absolute;	492	position: absolute;
385	}	493	}
386	.addAddress {	494	.addAddress {
387	background-color: #ffffff;	495	background-color: #ffffff;
388	box-sizing: border-box;	496	box-sizing: border-box;
389	height: 124rpx;	497	height: 124rpx;
390	width: 100%;	498	width: 100%;
391	display: flex;	499	display: flex;
392	align-items: center;	500	align-items: center;
393	padding: 0 40rpx;	501	padding: 0 40rpx;
394	.addIcon {	502	.addIcon {
395	background-color: #f2f2f2;	503	background-color: #f2f2f2;
396	height: 56rpx;	504	height: 56rpx;
397	width: 60rpx;	505	width: 60rpx;
398	border-radius: 4rpx;	506	border-radius: 4rpx;
399	display: flex;	507	display: flex;
400	justify-content: center;	508	justify-content: center;
401	align-items: center;	509	align-items: center;
402	margin-right: 40rpx;	510	margin-right: 40rpx;
403	}	511	}
404	image {	512	image {
405	height: 28rpx;	513	height: 28rpx;
406	width: 30rpx;	514	width: 30rpx;
407	}	515	}
408	.addressText {	516	.addressText {
409	font-size: 28rpx;	517	font-size: 28rpx;
410	color: #333333;	518	color: #333333;
411	margin-right: 364rpx;	519	margin-right: 364rpx;
412	}	520	}
413	}	521	}
414	.content {	522	.content {
415	background-color: #f2f2f2;	523	background-color: #f2f2f2;
416	width: 100%;	524	width: 100%;
417	display: flex;	525	display: flex;
418	flex-direction: column;	526	flex-direction: column;
419	justify-content: center;	527	justify-content: center;
420	align-items: center;	528	align-items: center;
421	padding: 40rpx;	529	padding: 40rpx;
422	box-sizing: border-box;	530	box-sizing: border-box;
423	.orderInfo {	531	.orderInfo {
424	width: 670rpx;	532	width: 670rpx;
425	min-height: 488rpx;	533	min-height: 488rpx;
426	background-color: #ffffff;	534	background-color: #ffffff;
427	border-radius: 20rpx;	535	border-radius: 20rpx;
428	box-sizing: border-box;	536	box-sizing: border-box;
429	padding: 0 40rpx 40rpx 40rpx;	537	padding: 0 40rpx 40rpx 40rpx;
430	.title {	538	.title {
431	display: flex;	539	display: flex;
432	align-items: center;	540	align-items: center;
433	font-size: 28rpx;	541	font-size: 28rpx;
434	color: #333333;	542	color: #333333;
435	height: 60rpx;	543	height: 60rpx;
436	line-height: 40rpx;	544	line-height: 40rpx;
437	padding: 10rpx 10rpx 10rpx 0rpx;	545	padding: 10rpx 10rpx 10rpx 0rpx;
438	image {	546	image {
439	margin-right: 20rpx;	547	margin-right: 20rpx;
440	}	548	}
441	}	549	}
442	.infoBox {	550	.infoBox {
443	margin-top: 42rpx;	551	margin-top: 42rpx;
444	.infoTop {	552	.infoTop {
445	display: flex;	553	display: flex;
446	flex-direction: row;	554	flex-direction: row;
447	image {	555	image {
448	height: 188rpx;	556	height: 188rpx;
449	width: 188rpx;	557	width: 188rpx;
450	margin-right: 24rpx;	558	margin-right: 24rpx;
451	}	559	}
452	.infoRight {	560	.infoRight {
453	width: 374rpx;	561	width: 374rpx;
454	display: flex;	562	display: flex;
455	flex-direction: column;	563	flex-direction: column;
456	align-items: flex-start;	564	align-items: flex-start;
457	justify-content: space-between;	565	justify-content: space-between;
458	.goodName {	566	.goodName {
459	font-size: 28rpx;	567	font-size: 28rpx;
460	color: #333333;	568	color: #333333;
461	}	569	}
462	.remarks {	570	.remarks {
463	font-size: 20rpx;	571	font-size: 20rpx;
464	color: #999999;	572	color: #999999;
465	}	573	}
466	.priceBox {	574	.priceBox {
467	display: flex;	575	display: flex;
468	justify-content: space-between;	576	justify-content: space-between;
469	align-items: center;	577	align-items: center;
470	width: 100%;	578	width: 100%;
471	.price {	579	.price {
472	color: #ff6b4a;	580	color: #ff6b4a;
473	font-size: 28rpx;	581	font-size: 28rpx;
474	}	582	}
475	.originCost {	583	.originCost {
476	text-decoration: line-through;	584	text-decoration: line-through;
477	color: #999999;	585	color: #999999;
478	font-size: 20rpx;	586	font-size: 20rpx;
479	}	587	}
480	.counter {	588	.counter {
481	display: flex;	589	display: flex;
482	flex-direction: row;	590	flex-direction: row;
483	justify-content: space-between;	591	justify-content: space-between;
484	font-size: 28rpx;	592	font-size: 28rpx;
485	color: #333333;	593	color: #333333;
486	width: 122rpx;	594	width: 122rpx;
487	.btn {	595	.btn {
488	display: flex;	596	display: flex;
489	justify-content: center;	597	justify-content: center;
490	line-height: 32rpx;	598	line-height: 32rpx;
491	height: 32rpx;	599	height: 32rpx;
492	width: 32rpx;	600	width: 32rpx;
493	background-color: #f2f2f2;	601	background-color: #f2f2f2;
494	color: #cfcfcf;	602	color: #cfcfcf;
495	}	603	}
496	}	604	}
497	}	605	}
498	}	606	}
499	}	607	}
500	.infoBottom {	608	.infoBottom {
501	display: flex;	609	display: flex;
502	flex-direction: column;	610	flex-direction: column;
503	justify-content: flex-start;	611	justify-content: flex-start;
504	font-size: 24rpx;	612	font-size: 24rpx;
505	color: #333333;	613	color: #333333;
506	text {	614	text {
507	color: #999999;	615	color: #999999;
508	margin-left: 20rpx;	616	margin-left: 20rpx;
509	}	617	}
510		618
511	.norm {	619	.norm {
512	margin-top: 28rpx;	620	margin-top: 28rpx;
513	}	621	}
514	.shippingMethod {	622	.shippingMethod {
515	margin-top: 12rpx;	623	margin-top: 12rpx;
516	}	624	}
517	.message {	625	.message {
518	display: flex;	626	display: flex;
519	flex-direction: row;	627	flex-direction: row;
520	align-items: center;	628	align-items: center;
521	margin-top: 18rpx;	629	margin-top: 18rpx;
522	input {	630	input {
523	margin-left: 20rpx;	631	margin-left: 20rpx;
524	width: 75%;	632	width: 75%;
525	}	633	}
526	}	634	}
527	}	635	}
528	}	636	}
529	}	637	}
530	.payWay {	638	.payWay {
531	height: 464rpx;	639	height: 464rpx;
532	width: 670rpx;	640	width: 670rpx;
533	background-color: #ffffff;	641	background-color: #ffffff;
534	color: #333333;	642	color: #333333;
535	font-size: 24rpx;	643	font-size: 24rpx;
536	border-radius: 20rpx;	644	border-radius: 20rpx;
537	box-sizing: border-box;	645	box-sizing: border-box;
538	padding: 0 52rpx 0rpx 40rpx;	646	padding: 0 52rpx 0rpx 40rpx;
539	margin-top: 20rpx;	647	margin-top: 20rpx;
540	display: flex;	648	display: flex;
541	flex-direction: column;	649	flex-direction: column;
542	justify-content: center;	650	justify-content: center;
543	align-items: flex-start;	651	align-items: flex-start;
544	.item {	652	.item {
545	display: flex;	653	display: flex;
546	flex-direction: row;	654	flex-direction: row;
547	justify-content: space-between;	655	justify-content: space-between;
548	align-items: center;	656	align-items: center;
549	width: 100%;	657	width: 100%;
550	height: 115rpx;	658	height: 115rpx;
551	.itemRight {	659	.itemRight {
552	display: flex;	660	display: flex;
553	flex-direction: row;	661	flex-direction: row;
554	justify-content: space-between;	662	justify-content: space-between;
555	align-items: center;	663	align-items: center;
556	image {	664	image {
557	height: 24rpx;	665	height: 24rpx;
558	width: 12rpx;	666	width: 12rpx;
559	}	667	}
560	.rightText {	668	.rightText {
561	margin-right: 20rpx;	669	margin-right: 20rpx;
562	text-align: right;	670	text-align: right;
563	.choosePayWay {	671	.choosePayWay {
564	display: flex;	672	display: flex;
565	align-items: center;	673	align-items: center;
566	text {	674	text {
567	color: #333333;	675	color: #333333;
568	}	676	}
569	image {	677	image {
570	height: 36rpx;	678	height: 36rpx;
571	width: 40rpx;	679	width: 40rpx;
572	margin-right: 8px;	680	margin-right: 8px;
573	}	681	}
574	}	682	}
575	.randomSubstraction {	683	.randomSubstraction {
576	color: #ff6b4a;	684	color: #ff6b4a;
577	}	685	}
578	.preferentialWay {	686	.preferentialWay {
579	color: #999999;	687	color: #999999;
580	}	688	}
581	}	689	}
582	.freight,	690	.freight,
583	.total {	691	.total {
584	margin-right: 32rpx;	692	margin-right: 32rpx;
585	}	693	}
586	text {	694	text {
587	color: #ff6b4a;	695	color: #ff6b4a;
588	}	696	}
589	}	697	}
590	}	698	}
591	}	699	}
592	// .checkBox {	700	// .checkBox {
593	// height: 58rpx;	701	// height: 58rpx;
594	// line-height: 58rpx;	702	// line-height: 58rpx;
595	// width: 100%;	703	// width: 100%;
596	// margin-top: 36rpx;	704	// margin-top: 36rpx;
597	// margin-left: 40rpx;	705	// margin-left: 40rpx;
598	// font-size: 12px;	706	// font-size: 12px;
599	// color: #999999;	707	// color: #999999;
600	// }	708	// }
601	}	709	}
602	.footer {	710	.footer {
603	height: 112rpx;	711	height: 112rpx;
604	width: 100%;	712	width: 100%;
605	background-color: #fff;	713	background-color: #fff;
606	font-size: 16px;	714	font-size: 16px;
607	display: flex;	715	display: flex;
608	justify-content: space-between;	716	justify-content: space-between;
609	align-items: center;	717	align-items: center;
610	position: fixed;	718	position: fixed;
611	bottom: 0;	719	bottom: 0;
		720	z-index: 9999;
612	.footerLeft {	721	.footerLeft {
613	display: flex;	722	display: flex;
614	justify-content: center;	723	justify-content: center;
615	align-items: center;	724	align-items: center;
616	width: 50%;	725	width: 50%;
617	color: #333333;	726	color: #333333;
618	text {	727	text {
619	color: #ff6b4a;	728	color: #ff6b4a;
620	}	729	}
621	}	730	}
622	.footerRight {	731	.footerRight {
623	display: flex;	732	display: flex;
624	justify-content: flex-end;	733	justify-content: flex-end;
625	align-items: center;	734	align-items: center;
626	width: 50%;	735	width: 50%;
627	margin-right: 26rpx;	736	margin-right: 26rpx;
628	.paybtn {	737	.paybtn {
629	display: flex;	738	display: flex;
630	justify-content: center;	739	justify-content: center;
631	align-items: center;	740	align-items: center;
632	background: #ff6b4a;	741	background: #ff6b4a;
633	border-radius: 20px;	742	border-radius: 20px;
634	border-radius: 20px;	743	border-radius: 20px;
635	color: #ffffff;	744	color: #ffffff;
636	width: 204rpx;	745	width: 204rpx;
637	height: 80rpx;	746	height: 80rpx;
638	}	747	}
639	}	748	}
640	}	749	}
641	// 地址信息样式	750	// 地址信息样式
642	.order-user {	751	.order-user {
643	width: 670rpx;	752	width: 670rpx;
644	height: 228rpx;	753	height: 228rpx;
645	background: #ffffff;	754	background: #ffffff;
646	border-radius: 14rpx;	755	border-radius: 14rpx;
647	margin: 0 auto;	756	margin: 0 auto;
648	margin-top: 20rpx;	757	margin-top: 20rpx;
649	position: relative;	758	position: relative;
650	.order-user-head {	759	.order-user-head {
651	display: flex;	760	display: flex;
652	height: 108rpx;	761	height: 108rpx;
653	width: 100%;	762	width: 100%;
654	align-items: center;	763	align-items: center;
655	padding-left: 126rpx;	764	padding-left: 126rpx;
656	box-sizing: border-box;	765	box-sizing: border-box;
657	.name {	766	.name {
658	display: flex;	767	display: flex;
659	justify-content: space-between;	768	justify-content: space-between;
660	font-size: 14px;	769	font-size: 14px;
661	color: #333333;	770	color: #333333;
662	letter-spacing: -0.26px;	771	letter-spacing: -0.26px;
663	margin-right: 20rpx;	772	margin-right: 20rpx;
664	.default {	773	.default {
665	height: 40rpx;	774	height: 40rpx;
666	width: 80rpx;	775	width: 80rpx;
667	background-color: #4a90e2;	776	background-color: #4a90e2;
668	border-radius: 13px;	777	border-radius: 13px;
669	border-radius: 13px;	778	border-radius: 13px;
670	text-align: center;	779	text-align: center;
671	margin-right: 20rpx;	780	margin-right: 20rpx;
672	text {	781	text {
673	display: flex;	782	display: flex;
674	justify-content: center;	783	justify-content: center;
675	align-items: center;	784	align-items: center;
676	font-size: 12px;	785	font-size: 12px;
677	color: #ffffff;	786	color: #ffffff;
678	letter-spacing: -0.23px;	787	letter-spacing: -0.23px;
679	}	788	}
680	}	789	}
681	}	790	}
682	.mobile {	791	.mobile {
683	font-size: 14px;	792	font-size: 14px;
684	color: #999999;	793	color: #999999;
685	letter-spacing: -0.26px;	794	letter-spacing: -0.26px;
686	}	795	}
687	}	796	}
688	.order-user-body {	797	.order-user-body {
689	display: flex;	798	display: flex;
690	width: 100%;	799	width: 100%;
691	image {	800	image {
692	width: 24px;	801	width: 24px;
693	height: 28px;	802	height: 28px;
694	margin: 12rpx 32rpx 0 40rpx;	803	margin: 12rpx 32rpx 0 40rpx;
695	}	804	}
696	.address {	805	.address {
697	font-weight: bold;	806	font-weight: bold;
698	font-size: 14px;	807	font-size: 14px;
699	color: #333333;	808	color: #333333;
700	letter-spacing: -0.26px;	809	letter-spacing: -0.26px;
701	}	810	}
702	}	811	}
703	.arrow {	812	.arrow {
704	width: 12px;	813	width: 12px;
705	height: 12px;	814	height: 12px;
706	position: absolute;	815	position: absolute;
707	right: 40rpx;	816	right: 40rpx;
708	bottom: 104rpx;	817	bottom: 104rpx;
709	}	818	}
710	}	819	}
711	.last_zhanwei{	820	.last_zhanwei{
712	background: #f2f2f2;	821	background: #f2f2f2;
713	height: 60px;	822	height: 60px;
714	}	823	}
715	</style>	824	</style>
716		825

src/store/modules/cart.js

Diff comments View file @4ee9880

 import urlAlias from '../url'
 import request from '../request'
 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
 const state = {
   cartList: [],
+  checkedCartLst:[],
+  buyItem:Object
 }
 const mutations = {
   INIT: (state, cartList) => {
     state.cartList = cartList
   },
   DEL: (state, index) => {
-    console.log('mutations====>', state.cartList)
     state.cartList.splice(index, 1)
-    console.log('mutations====>index', index)
-    // state.cartList=delList
   },
   MODI: (state, args) => {
     state.cartList[args.index].num = args.num
   },
 }
 const actions = {
   // 获取购物车列表
     getCartList({ commit }, param) {
     return new Promise((resolve) =>  request({
       url: cartList,
       data: param,
       success: (res) => {
 		let test = {
 			isChecked: false,
 			itemNum:1,
 			price:0
 		}
         commit('INIT', res.data.data)
 		resolve(res.data.data)
       },
     }))
   },
   // 修改购物车数量
   modiCart({ commit }, param) {
     const arg = Object.assign({ num: param.num }, param.args)
     delete param.args
     return new Promise((resolve) =>  request({
       url: cartModi,
       data: param,
       success: (res) => {
-        console.log('modi-parm', param)
         commit('MODI', arg)
       },
       fail: (res) => {
-        console.log('fail status === > ', res)
       },
       complete: (res) => {
-        console.log('complete status === > ', res)
       },
     }))
   },
   // 删除购物车商品
   delCart({ commit }, param) {
     const arg = param.arg
     delete param.arg
     request({
       url: cartDel,
       data: param,
       success: (res) => {
-        console.log('del-parm', param)
-        console.log('del-myparms==>', arg)
         commit('DEL', arg)
       },
       fail: (res) => {
-        console.log('fail status === > ', res)
       },
       complete: (res) => {
-        console.log('complete status === > ', res)
       },
     })
   },
   // 添加到购物车
   addCart({ commit }, param) {
     console.log('请求接口开始')
     return new Promise((resolve) =>  request({
       url: cartAdd,
       data: param,
       success: (res) => {
         console.log('add-parm', param)
         console.log('addcart===>res.data===>', res.data)
         // commit('INIT', res.data.data)
 		resolve(res.data)
       },
       fail: (res) => {
         console.log('添加购物车失败 === > ', res)
       },
       complete: (res) => {
         console.log('添加购物车完成 === > ', res)
       },
     }))
   },
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions,