吉鹏 / gulu-vue

Browse Code »

Commit eed6c3ca9b53ee18cc16870e4d22da46b33bbd01

Authored by BigBoss 2020-06-11 20:28:30 +0800

1 parent 1a4cad7196

Exists in master

订单列表添加支付和取消功能，修改订单详情报错的bug

Showing 8 changed files with 189 additions and 95 deletions Show diff stats

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @eed6c3c

 <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="ipts">
 					  	<view class="inputItem">
 					  		<text class="text">镜片宽度</text>
 					  		<input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
 					  	</view>
 					  	<view class="inputItem">
 					  		<text class="text">鼻梁宽度</text>
 					  		<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
 					  	</view>
 					  	<view class="inputItem">
 					  		<text class="text">镜腿长度</text>
 					  		<input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
 					  	</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,
 		      },
 		    },
 			glassInfo:{
 				glassWidth:Number,//镜片宽度
 				norseWidth:Number,//鼻宽
 				legWidth:Number//镜腿长度
 			},
 		    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
 		  },
 		  glassInfoRight(){
 			const glassInfoArr = Object.values(this.glassInfo)
 			// console.log('glassInfoArr',glassInfoArr.find(item => item == '0'))
 			return glassInfoArr.find(item => item == '0') ==undefined
 		  }
 		},
-		// beforeDestroy() {
-		// 	//获取关心的人列表
-		// 	store.dispatch('myLoveList/getLoveList', {
-		// 		uid: this.$store.state.user.userInfo.uid,
-		// 	});
-		// },
 		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: {
 			//判断眼镜数据是否为0
 			checkGlassInfo(){
 				// const glassInfoArr = Object.values(this.glassInfo)
 				// console.log(this.glassInfoRight)
 				if(!this.glassInfoRight){
 					uni.showToast({
 						title:'请完善镜框数据~',
 						icon:'none'
 					})
 				}
 			},
 			updateMylove(){
 				const loveItem = this.loveList[this.loveCurrent]
 				const glassWidth = this.glassInfo.glassWidth
 				const norseWidth = this.glassInfo.norseWidth
 				const legWidth = this.glassInfo.legWidth
 				if(loveItem.glassWidth !== glassWidth){
 					store.dispatch('myLoveList/updateMylove', {
 						uid: this.$store.state.user.userInfo.uid,
 						openid: this.$store.state.user.userInfo.openid,
 						mp_id: this.mp_id,
 						keyname: 'glassWidth',
 						keyvalue: glassWidth
 					});
 				}
 				if(loveItem.norseWidth !== norseWidth){
 					store.dispatch('myLoveList/updateMylove', {
 						uid: this.$store.state.user.userInfo.uid,
 						openid: this.$store.state.user.userInfo.openid,
 						mp_id: this.mp_id,
 						keyname: 'norseWidth',
 						keyvalue: norseWidth
 					});
 				}
 				if(loveItem.legWidth !== legWidth){
 					store.dispatch('myLoveList/updateMylove', {
 						uid: this.$store.state.user.userInfo.uid,
 						openid: this.$store.state.user.userInfo.openid,
 						mp_id: this.mp_id,
 						keyname: 'legWidth',
 						keyvalue: legWidth
 					});
 				}
 			},
 			glassInfoInput(e,type){
 				switch(type){
 					case 0:
 						this.glassInfo.glassWidth = e.detail.value
 					break;
 					case 1:
 						this.glassInfo.norseWidth = e.detail.value
 					break;
 					case 2:
 						this.glassInfo.legWidth = e.detail.value
 					break;
 					default:
 					break;
 				}
 			},
 			//参数点击事件==》改变对应图片
 			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(){
 				this.checkGlassInfo()
 				if(this.glassInfoRight){
 					this.updateMylove()
 					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(){
 				this.checkGlassInfo()
 				if(this.glassInfoRight){
 					this.updateMylove()
 					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]
 						  }
 					}
 					const price = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price
 					let sk_id = this.skuList[j].sk_id
 					// console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
 					// console.log('mp_id',this.mp_id,'数量',this.count)
 					this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车
 					this.$emit("closeBottom")//关闭弹窗
 				}
 			},
 			onClickLoveItem(index,name){
 				const loveList = this.loveList
 				this.glassInfo.glassWidth = loveList[index].glassWidth
 				this.glassInfo.norseWidth = loveList[index].norseWidth
 				this.glassInfo.legWidth = loveList[index].legWidth
 				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() {
 				this.checkGlassInfo()
 				this.updateMylove()
 			  // 先处理验光部分的逻辑，如果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) {
 			        // 添加用户验光单
 			        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
 			        }
 			      }
 			      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,
 			            })
 			          }
 			        // } 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}&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;
 	          }
 	        }
 	      }
 	    }
 		.ipts{
 			width: 100%;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: flex-start;
 			// padding: 20rpx 36rpx;
 			box-sizing: border-box;
 			.inputItem{
 				display: flex;
 				flex-direction: row;
 				justify-content: center;
 				align-items: center;
 				margin-bottom: 36rpx;
 				.text{
 					margin-right: 100rpx;
 				}
 				.input{
 					border-bottom: 1px solid #CFCFCF;
 				}
 			}
 		}
 	    }
 	    }
 	  }
 	  .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;
 		z-index: 9999;
 	  }
 	}
 	/* 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/pages/details/details.vue

Diff comments View file @eed6c3c

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<!-- 基础信息 -->	3	<!-- 基础信息 -->
4	<view class="basic_info">	4	<view class="basic_info">
5	<!-- 轮播图 -->	5	<!-- 轮播图 -->
6	<swiper	6	<swiper
7	class="swiperImage"	7	class="swiperImage"
8	:indicator-dots="true"	8	:indicator-dots="true"
9	:autoplay="true"	9	:autoplay="true"
10	:interval="4000"	10	:interval="4000"
11	:duration="500"	11	:duration="500"
12	>	12	>
13	<swiper-item	13	<swiper-item
14	v-for="(item, index) in carousel"	14	v-for="(item, index) in carousel"
15	:key="index"	15	:key="index"
16	>	16	>
17	<image	17	<image
18	:src="item"	18	:src="item"
19	mode="scaleToFill"	19	mode="scaleToFill"
20	></image>	20	></image>
21	</swiper-item>	21	</swiper-item>
22	</swiper>	22	</swiper>
23	<!-- 产品价格及购买人数 -->	23	<!-- 产品价格及购买人数 -->
24	<view class="info_pay">	24	<view class="info_pay">
25	<view>￥{{goodsInfo.price \|\| '暂无'}}<span	25	<view>￥{{goodsInfo.price \|\| '暂无'}}<span
26	v-if="goodsInfo.discountPrice"	26	v-if="goodsInfo.discountPrice"
27	class="info_pay_discount"	27	class="info_pay_discount"
28	>¥{{goodsInfo.discountPrice}}</span></view>	28	>¥{{goodsInfo.discountPrice}}</span></view>
29	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>	29	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>
30	</view>	30	</view>
31	<!-- 产品名称 -->	31	<!-- 产品名称 -->
32	<view class="info_name">	32	<view class="info_name">
33	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>	33	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>
34	<view	34	<view
35	@tap="confirmShare"	35	@tap="confirmShare"
36	class="info_name_share"	36	class="info_name_share"
37	>	37	>
38	<image src="/static/img/detail/share-icon.png"></image>	38	<image src="/static/img/detail/share-icon.png"></image>
39	<text>分享</text>	39	<text>分享</text>
40	</view>	40	</view>
41	</view>	41	</view>
42	<!-- 产品售后信息 -->	42	<!-- 产品售后信息 -->
43	<view class="info_after">	43	<view class="info_after">
44	<span>支持7天无理由退货</span>	44	<span>支持7天无理由退货</span>
45	<span>顺丰发货</span>	45	<span>顺丰发货</span>
46	<span>30天质量保证</span>	46	<span>30天质量保证</span>
47	</view>	47	</view>
48	</view>	48	</view>
49	<!-- 详细信息 -->	49	<!-- 详细信息 -->
50	<view class="detail_info">	50	<view class="detail_info">
51	<!-- 详细信息菜单 -->	51	<!-- 详细信息菜单 -->
52	<view class="screen_bar">	52	<view class="screen_bar">
53	<view	53	<view
54	v-for="(item, index) in screenItems"	54	v-for="(item, index) in screenItems"
55	:key="index"	55	:key="index"
56	@click="tabChange(index)"	56	@click="tabChange(index)"
57	>	57	>
58	<view	58	<view
59	class="screen_item"	59	class="screen_item"
60	v-bind:class="{ item_active: item_current === index }"	60	v-bind:class="{ item_active: item_current === index }"
61	>{{ screenItems[index] \|\| '暂无' }}</view>	61	>{{ screenItems[index] \|\| '暂无' }}</view>
62	</view>	62	</view>
63	</view>	63	</view>
64	<!-- 商品介绍 -->	64	<!-- 商品介绍 -->
65	<view	65	<view
66	class="screen_item"	66	class="screen_item"
67	v-if="item_current === 0"	67	v-if="item_current === 0"
68	>	68	>
69	<Introduce :tag="tag" />	69	<Introduce :tag="tag" />
70	</view>	70	</view>
71	<!-- 规格参数 -->	71	<!-- 规格参数 -->
72	<view	72	<view
73	class="screen_item"	73	class="screen_item"
74	v-if="item_current === 1"	74	v-if="item_current === 1"
75	>	75	>
76	<view class="specification">	76	<view class="specification">
77	<view	77	<view
78	class="spe_item"	78	class="spe_item"
79	v-for="(item, index) in specification"	79	v-for="(item, index) in specification"
80	:key="index"	80	:key="index"
81	>	81	>
82	<image	82	<image
83	class="spe_image"	83	class="spe_image"
84	v-bind:src="item.img"	84	v-bind:src="item.img"
85	></image>	85	></image>
86	<span>{{item.standard \|\| '暂无'}}</span>	86	<span>{{item.standard \|\| '暂无'}}</span>
87	<span>{{item.slength \|\| '暂无'}}</span>	87	<span>{{item.slength \|\| '暂无'}}</span>
88	</view>	88	</view>
89	</view>	89	</view>
90	</view>	90	</view>
91	<!-- 售后保障 -->	91	<!-- 售后保障 -->
92	<view	92	<view
93	class="screen_item"	93	class="screen_item"
94	v-if="item_current === 2"	94	v-if="item_current === 2"
95	>	95	>
96	<AfterSails />	96	<AfterSails />
97	</view>	97	</view>
98	</view>	98	</view>
99	<!-- 评价 -->	99	<!-- 评价 -->
100	<template v-if="item_current !== 2">	100	<template v-if="item_current !== 2">
101	<view class="evaluate">	101	<view class="evaluate">
102	<!-- 标题 -->	102	<!-- 标题 -->
103	<view class="evaluate_title">	103	<view class="evaluate_title">
104	<view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>	104	<view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
105	<!-- 星星 -->	105	<!-- 星星 -->
106	<view class="evaluate_star">	106	<view class="evaluate_star">
107	<view	107	<view
108	class="star"	108	class="star"
109	v-for="(item, index) in evaluate.star"	109	v-for="(item, index) in evaluate.star"
110	:key="index"	110	:key="index"
111	>	111	>
112	<image	112	<image
113	src="../../static/img/detail/d_star.png"	113	src="../../static/img/detail/d_star.png"
114	mode="aspectFill"	114	mode="aspectFill"
115	style="height: 26rpx; width: 28rpx;"	115	style="height: 26rpx; width: 28rpx;"
116	></image>	116	></image>
117	</view>	117	</view>
118	</view>	118	</view>
119	</view>	119	</view>
120	<!-- 标签 -->	120	<!-- 标签 -->
121	<view class="evaluate_tag">	121	<view class="evaluate_tag">
122	<view	122	<view
123	v-for="(item, index) in evaluate.tag"	123	v-for="(item, index) in evaluate.tag"
124	:key="index"	124	:key="index"
125	>{{item.name}}</view>	125	>{{item.name}}</view>
126	</view>	126	</view>
127	</view>	127	</view>
128	</template>	128	</template>
129	<!-- 商品详情页 -->	129	<!-- 商品详情页 -->
130	<template v-if="current !==2">	130	<template v-if="current !==2">
131	<view class="more_info">	131	<view class="more_info">
132	<view	132	<view
133	class="more_fixed1"	133	class="more_fixed1"
134	@click="consolg(goodInfo.prodIntro1)"	134	@click="consolg(goodInfo.prodIntro1)"
135	>	135	>
136	<image src="/static/img/detail/hr.png"></image>	136	<image src="/static/img/detail/hr.png"></image>
137	<view>商品详情</view>	137	<view>商品详情</view>
138	<image src="/static/img/detail/hr.png"></image>	138	<image src="/static/img/detail/hr.png"></image>
139	</view>	139	</view>
140	<view	140	<view
141	class="more_all"	141	class="more_all"
142	v-html="more"	142	v-html="more"
143	>	143	>
144	</view>	144	</view>
145	</view>	145	</view>
146	</template>	146	</template>
147	<!-- 底部菜单 -->	147	<!-- 底部菜单 -->
148	<view class="menu">	148	<view class="menu">
149	<view	149	<view
150	@tap="toCart()"	150	@tap="toCart()"
151	class="menu_1"	151	class="menu_1"
152	>	152	>
153	<view class="cart_icon">	153	<view class="cart_icon">
154	<image src="/static/tab-cart.png" />	154	<image src="/static/tab-cart.png" />
155	<text>{{cartNumber}}</text>	155	<text>{{cartNumber}}</text>
156	</view>	156	</view>
157	<view class="menu_image">购物车</view>	157	<view class="menu_image">购物车</view>
158	</view>	158	</view>
159	<view class="menu_2">	159	<view class="menu_2">
160	<view	160	<view
161	class="menu_input"	161	class="menu_input"
162	@tap="showBottom(1)"	162	@tap="showBottom(1)"
163	>加入购物车</view>	163	>加入购物车</view>
164	<view	164	<view
165	class="menu_now"	165	class="menu_now"
166	@click="showBottom(2)"	166	@click="showBottom(2)"
167	>立即购买</view>	167	>立即购买</view>
168	</view>	168	</view>
169	</view>	169	</view>
170	<!-- 参数选择 -->	170	<!-- 参数选择 -->
171	<template v-if="isShowBottom">	171	<template v-if="isShowBottom">
172	<BottomSheet	172	<BottomSheet
173	:isCart="isCart"	173	:isCart="isCart"
174	@addCart="addCart"	174	@addCart="addCart"
175	:pid="pid"	175	:pid="pid"
176	:goodInfo="goodInfo"	176	:goodInfo="goodInfo"
177	:isShowBottom="isShowBottom"	177	:isShowBottom="isShowBottom"
178	@closeBottom="closeBottom"	178	@closeBottom="closeBottom"
179	></BottomSheet>	179	></BottomSheet>
180	</template>	180	</template>
181	<!-- 分享 -->	181	<!-- 分享 -->
182	<template>	182	<template>
183	<uni-popup	183	<uni-popup
184	ref="popupShare"	184	ref="popupShare"
185	type="share"	185	type="share"
186	>	186	>
187	<uni-popup-share @select="selectShare"></uni-popup-share>	187	<uni-popup-share @select="selectShare"></uni-popup-share>
188	</uni-popup>	188	</uni-popup>
189	</template>	189	</template>
190	<!-- 分享海报 -->	190	<!-- 分享海报 -->
191	<template>	191	<template>
192	<uni-popup	192	<uni-popup
193	ref="uniPopupPost"	193	ref="uniPopupPost"
194	type="center"	194	type="center"
195	>	195	>
196	<uni-popup-post :postUrl="postUrl"></uni-popup-post>	196	<uni-popup-post :postUrl="postUrl"></uni-popup-post>
197	</uni-popup>	197	</uni-popup>
198	</template>	198	</template>
199	</view>	199	</view>
200	</template>	200	</template>
201		201
202	<script>	202	<script>
203	import store from '@/store'	203	import store from '@/store'
204	import Introduce from './components/Introduce' // 商品介绍基本信息组件	204	import Introduce from './components/Introduce' // 商品介绍基本信息组件
205	import AfterSails from './components/AfterSails' // 售后保障组件	205	import AfterSails from './components/AfterSails' // 售后保障组件
206	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件	206	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
207	import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件	207	import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
208	import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件	208	import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
209		209
210	export default {	210	export default {
211	components: {	211	components: {
212	Introduce,	212	Introduce,
213	AfterSails,	213	AfterSails,
214	BottomSheet,	214	BottomSheet,
215	uniPopupShare,	215	uniPopupShare,
216	uniPopupPost,	216	uniPopupPost,
217	},	217	},
218	data () {	218	data () {
219	return {	219	return {
220	pid: 7, // 产品ID	220	pid: 7, // 产品ID
221	skId: undefined, // skuId	221	skId: undefined, // skuId
222	// 详细信息菜单	222	// 详细信息菜单
223	item_current: 0,	223	item_current: 0,
224	screenItems: [	224	screenItems: [
225	'商品介绍',	225	'商品介绍',
226	'规格参数',	226	'规格参数',
227	'售后保障',	227	'售后保障',
228	],	228	],
229	showPostImg: false, // 是否展示分享海报	229	showPostImg: false, // 是否展示分享海报
230	isShowBottom: false, // 是否展示参数选择	230	isShowBottom: false, // 是否展示参数选择
231	isCart: 1, // 参数选择按钮判断	231	isCart: 1, // 参数选择按钮判断
232	}	232	}
233	},	233	},
234	onLoad({ pid = this.pid, sk_id: skId }) {	234	onLoad({ pid = this.pid, sk_id: skId }) {
235	// 根据页面传参请求页面数据	235	// 根据页面传参请求页面数据
236	this.pid = pid	236	this.pid = pid
237	this.skId = skId	237	this.skId = skId
238		238
239	// 获取产品详情	239	// 获取产品详情
240	this.getDetails({ pid, skId })	240	this.getDetails({ pid, skId })
241	// 获取购物车数据	241	// 获取购物车数据
242	this.getCartNum()	242	this.getCartNum()
243	},	243	},
244	computed: {	244	computed: {
245	// 获取轮播图数据	245	// 获取轮播图数据
246	goodInfo() {	246	goodInfo() {
247	return this.$store.state.details.goodInfo	247	return this.$store.state.details.goodInfo
248	},	248	},
249	// 获取轮播图数据	249	// 获取轮播图数据
250	carousel() {	250	carousel() {
251	return this.$store.state.details.carousel	251	return this.$store.state.details.carousel
252	},	252	},
253	// 商品基本信息	253	// 商品基本信息
254	goodsInfo() {	254	goodsInfo() {
255	return this.$store.state.details.goodsInfo	255	return this.$store.state.details.goodsInfo
256	},	256	},
257	// 商品介绍商品标签	257	// 商品介绍商品标签
258	tag() {	258	tag() {
259	return this.$store.state.details.tag	259	return this.$store.state.details.tag
260	},	260	},
261	// 规格参数	261	// 规格参数
262	specification() {	262	specification() {
263	return this.$store.state.details.specification	263	return this.$store.state.details.specification
264	},	264	},
265	// 评价	265	// 评价
266	evaluate() {	266	evaluate() {
267	return this.$store.state.details.evaluate	267	return this.$store.state.details.evaluate
268	},	268	},
269	// 商品详情	269	// 商品详情
270	more() {	270	more() {
271	return this.$store.state.details.more	271	return this.$store.state.details.more
272	},	272	},
273	// 购物车数目	273	// 购物车数目
274	cartNumber() {	274	cartNumber() {
275	return this.$store.state.details.cartNumber	275	return this.$store.state.details.cartNumber
276	},	276	},
277	// 购物车数目	277	// 购物车数目
278	skuList() {	278	skuList() {
279	return this.$store.state.details.skuList	279	return this.$store.state.details.skuList
280	},	280	},
281	// 分享海报	281	// 分享海报
282	postUrl() {	282	postUrl() {
283	return this.$store.state.details.postUrl	283	return this.$store.state.details.postUrl
284	},	284	},
285	},	285	},
286	methods: {	286	methods: {
287	// 获取产品详情	287	// 获取产品详情
288	getDetails({ pid, skId }) {	288	getDetails({ pid, skId }) {
289	store.dispatch('details/details', {	289	store.dispatch('details/details', {
290	pid,	290	pid,
291	sk_id: skId,	291	sk_id: skId,
292	})	292	})
293	store.dispatch('read/fetch', {	293	store.dispatch('read/fetch', {
294	pid,	294	pid,
295	sk_id: skId,	295	sk_id: skId,
296	})	296	})
297	},	297	},
298	// 获取购物车数目	298	// 获取购物车数目
299	getCartNum() {	299	getCartNum() {
300	store.dispatch('details/getCartNumber')	300	store.dispatch('details/getCartNumber')
301	},	301	},
302	// 切换详细信息菜单	302	// 切换详细信息菜单
303	tabChange (e) {	303	tabChange (e) {
304	if (this.current !== e) {	304	if (this.current !== e) {
305	this.item_current = e	305	this.item_current = e
306	}	306	}
307	},	307	},
308	// 打开分享界面	308	// 打开分享界面
309	confirmShare() {	309	confirmShare() {
310	this.$refs.popupShare.open()	310	this.$refs.popupShare.open()
311	},	311	},
312	// 选择分享	312	// 选择分享
313	selectShare(e, done) {	313	selectShare(e, done) {
314	switch (e.item.name) {	314	switch (e.item.name) {
315	// 分享到好物圈	315	// 分享到好物圈
316	case 'recommend':	316	case 'recommend':
317	this.shareRecommend()	317	this.shareRecommend()
318	break	318	break
319	// 分享到朋友圈	319	// 分享到朋友圈
320	case 'friend':	320	case 'friend':
321	break	321	break
322	// 生成海报	322	// 生成海报
323	case 'poster':	323	case 'poster':
324	uni.showLoading({	324	uni.showLoading({
325	title: '生成图片中',	325	title: '生成图片中',
326	})	326	})
327	this.sharePost()	327	this.sharePost()
328	break	328	break
329	default:	329	default:
330	break	330	break
331	}	331	}
332	done()	332	done()
333	},	333	},
334	// 分享到好物圈	334	// 分享到好物圈
335	shareRecommend() {	335	shareRecommend() {
336	if (wx.openBusinessView) {	336	if (wx.openBusinessView) {
337	wx.openBusinessView({	337	wx.openBusinessView({
338	businessType: 'friendGoodsRecommend',	338	businessType: 'friendGoodsRecommend',
339	extraData: {	339	extraData: {
340	product: {	340	product: {
341	item_code: '58_68',	341	item_code: '58_68',
342	title: this.goodsInfo.name,	342	title: this.goodsInfo.name,
343	image_list: this.carousel,	343	image_list: this.carousel,
344	},	344	},
345	},	345	},
346	success: function (res) {	346	success: function (res) {
347	uni.showToast({	347	uni.showToast({
348	title: '好物圈分享成功！',	348	title: '好物圈分享成功！',
349	icon: 'none',	349	icon: 'none',
350	duration: 2000,	350	duration: 2000,
351	})	351	})
352	// 向服务器报告这个事情	352	// 向服务器报告这个事情
353	// TODO:::记录这个用户的推广过程。	353	// TODO:::记录这个用户的推广过程。
354	console.log('好物圈分享成功！', res)	354	console.log('好物圈分享成功！', res)
355	},	355	},
356	fail: function (res) {	356	fail: function (res) {
357	console.log('好物圈分享失败！', res)	357	console.log('好物圈分享失败！', res)
358	},	358	},
359	})	359	})
360	}	360	}
361	},	361	},
362	// 分享到朋友/圈	362	// 分享到朋友/圈
363	shareFriend() {	363	shareFriend() {
364	this.onShareAppMessage()	364	this.onShareAppMessage()
365	},	365	},
366	// 朋友圈设置页面	366	// 朋友圈设置页面
367	onShareAppMessage() {	367	onShareAppMessage() {
368	let myName = this.$store.state.user.userInfo.nickName	368	let myName = this.$store.state.user.userInfo.nickName
369	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {	369	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {
370	myName = '【神秘人】'	370	myName = '【神秘人】'
371	} else {	371	} else {
372	myName = '【' + myName + '】'	372	myName = '【' + myName + '】'
373	}	373	}
374	return {	374	return {
375	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)	375	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
376	path: '/pages/details/details?sid=0&pid=' + this.pid,	376	path: '/pages/details/details?sid=0&pid=' + this.pid,
377	imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4	377	imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
378	success: function (res) {	378	success: function (res) {
379	if (res.errMsg === 'shareAppMessage:ok') {	379	if (res.errMsg === 'shareAppMessage:ok') {
380	console.log('分享成功！', res)	380	console.log('分享成功！', res)
381	}	381	}
382	},	382	},
383	fail: function (res) {	383	fail: function (res) {
384	if (res.errMsg === 'shareAppMessage:fail cancel') {	384	if (res.errMsg === 'shareAppMessage:fail cancel') {
385	console.log('fail', '放弃分享')	385	console.log('fail', '放弃分享')
386	} else if (res.errMsg === 'shareAppMessage:fail') {	386	} else if (res.errMsg === 'shareAppMessage:fail') {
387	console.log('fail', '分享失败')	387	console.log('fail', '分享失败')
388	}	388	}
389	},	389	},
390	}	390	}
391	},	391	},
392	// 生成海报	392	// 生成海报
393	sharePost() {	393	sharePost() {
394	const fromsid = this.$store.state.user.fromInfo.fromsid \|\| 'undefined'	394	const fromsid = this.$store.state.user.fromInfo.fromsid \|\| 'undefined'
395		395
396	store.dispatch('details/post', {	396	store.dispatch('details/post', {
397	pid: this.pid,	397	pid: this.pid,
398	sid: fromsid === 'undefined' ? 0 : fromsid,	398	sid: fromsid === 'undefined' ? 0 : fromsid,
399	}).then((data) => {	399	}).then((data) => {
400	uni.hideLoading()	400	uni.hideLoading()
401	this.$refs.uniPopupPost.open()	401	this.$refs.uniPopupPost.open()
402	})	402	})
403	},	403	},
404	// 参数选择弹窗开关	404	// 参数选择弹窗开关
405	showBottom(isCart) {	405	showBottom(isCart) {
406	this.isCart = isCart	406	this.isCart = isCart
407	this.isShowBottom = true	407	this.isShowBottom = true
408	},	408	},
409	closeBottom() {	409	closeBottom() {
410	this.isShowBottom = false	410	this.isShowBottom = false
411	},	411	},
412	// 前往购物车	412	// 前往购物车
413	toCart() {	413	toCart() {
414	uni.switchTab({	414	uni.switchTab({
415	url: '/pages/cart/cart',	415	url: '/pages/cart/cart',
416	success: res => {},	416	success: res => {},
417	fail: (error) => { console.log('跳转购物车失败======>', error) },	417	fail: (error) => { console.log('跳转购物车失败======>', error) },
418	complete: () => { console.log('toCart') },	418	complete: () => { console.log('toCart') },
419	})	419	})
420	},	420	},
421	// 加入购物车	421	// 加入购物车
422	addCart (mpId, num, checkedSKU, skId, price) {	422	addCart (mpId, num, checkedSKU, skId, price) {
423	const addCartList = {}	423	const addCartList = {}
424	addCartList.mp_id = mpId	424	addCartList.mp_id = mpId
425	addCartList.sk_id = skId	425	addCartList.sk_id = skId
426	addCartList.num = num	426	addCartList.num = num
427	addCartList.checkedSKU = checkedSKU	427	// addCartList.checkedSKU = checkedSKU
428	addCartList.pid = this.pid	428	addCartList.pid = this.pid
429	addCartList.price = price	429	addCartList.price = price
430	console.log('添加购物车的参数', addCartList)	430	console.log('添加购物车的参数', addCartList)
431	store.dispatch('cart/addCart', addCartList).then((res) => {	431	store.dispatch('cart/addCart', addCartList).then((res) => {
432	if (res.code === 1) {	432	if (res.code === 1) {
433	uni.showToast({	433	uni.showToast({
434	title: '添加成功~',	434	title: '添加成功~',
435	icon: 'success',	435	icon: 'success',
436	})	436	})
437	}	437	}
438	// 再次请求购物车接口，实现实时更新	438	// 再次请求购物车接口，实现实时更新
439	store.dispatch('details/getCartNumber')	439	store.dispatch('details/getCartNumber')
440	})	440	})
441	},	441	},
442	},	442	},
443	}	443	}
444	</script>	444	</script>
445		445
446	<style lang="scss">	446	<style lang="scss">
447	.container {	447	.container {
448	background-color: #f8f8f8;	448	background-color: #f8f8f8;
449	font-family: "PingFangSC-Regular";	449	font-family: "PingFangSC-Regular";
450	// 板块样式	450	// 板块样式
451	> view {	451	> view {
452	background: #ffffff;	452	background: #ffffff;
453	margin-bottom: 10px;	453	margin-bottom: 10px;
454	padding: 8px 20px 8px 20px;	454	padding: 8px 20px 8px 20px;
455	box-sizing: border-box;	455	box-sizing: border-box;
456	}	456	}
457	// 基础信息板块	457	// 基础信息板块
458	.basic_info {	458	.basic_info {
459	// 轮播图	459	// 轮播图
460	.swiperImage {	460	.swiperImage {
461	width: 684rpx;	461	width: 684rpx;
462	height: 480rpx;	462	height: 480rpx;
463	text-align: center;	463	text-align: center;
464	image {	464	image {
465	max-width: 100%;	465	max-width: 100%;
466	max-height: 100%;	466	max-height: 100%;
467	border-radius: 16rpx;	467	border-radius: 16rpx;
468	}	468	}
469	}	469	}
470	// 产品价格及购买人数	470	// 产品价格及购买人数
471	.info_pay {	471	.info_pay {
472	color: #eb5d3b;	472	color: #eb5d3b;
473	font-size: 18px;	473	font-size: 18px;
474	margin-top: 5px;	474	margin-top: 5px;
475	font-family: "PingFangSC-Semibold";	475	font-family: "PingFangSC-Semibold";
476	display: flex;	476	display: flex;
477	justify-content: space-between;	477	justify-content: space-between;
478	.info_pay_discount {	478	.info_pay_discount {
479	text-decoration: line-through;	479	text-decoration: line-through;
480	margin-left: 8rpx;	480	margin-left: 8rpx;
481	color: #999;	481	color: #999;
482	font-size: 14px;	482	font-size: 14px;
483	}	483	}
484	.info_pay_number {	484	.info_pay_number {
485	color: #999;	485	color: #999;
486	font-size: 14px;	486	font-size: 14px;
487	font-family: PingFangSC-Regular;	487	font-family: PingFangSC-Regular;
488	}	488	}
489	}	489	}
490	// 产品名称	490	// 产品名称
491	.info_name {	491	.info_name {
492	margin-top: 5px;	492	margin-top: 5px;
493	display: flex;	493	display: flex;
494	justify-content: space-between;	494	justify-content: space-between;
495	.info_name_name {	495	.info_name_name {
496	margin-right: 10px;	496	margin-right: 10px;
497	font-size: 16px;	497	font-size: 16px;
498	font-family: "PingFangSC-Semibold";	498	font-family: "PingFangSC-Semibold";
499	max-width: 592rpx;	499	max-width: 592rpx;
500	}	500	}
501	.info_name_share {	501	.info_name_share {
502	display: flex;	502	display: flex;
503	flex-direction: column;	503	flex-direction: column;
504	justify-content: space-between;	504	justify-content: space-between;
505	align-items: center;	505	align-items: center;
506	margin-top: 14rpx;	506	margin-top: 14rpx;
507	> image {	507	> image {
508	height: 40rpx;	508	height: 40rpx;
509	width: 40rpx;	509	width: 40rpx;
510	}	510	}
511	> text {	511	> text {
512	font-family: PingFangSC-Regular;	512	font-family: PingFangSC-Regular;
513	font-size: 12px;	513	font-size: 12px;
514	color: #999;	514	color: #999;
515	letter-spacing: -0.23px;	515	letter-spacing: -0.23px;
516	}	516	}
517	}	517	}
518	}	518	}
519	// 售后服务	519	// 售后服务
520	.info_after {	520	.info_after {
521	font-size: 10px;	521	font-size: 10px;
522	color: #999;	522	color: #999;
523	margin-top: 20rpx;	523	margin-top: 20rpx;
524	> span {	524	> span {
525	height: 14px;	525	height: 14px;
526	margin-right: 10px;	526	margin-right: 10px;
527	}	527	}
528	}	528	}
529	}	529	}
530	// 详细信息	530	// 详细信息
531	.detail_info {	531	.detail_info {
532	margin-bottom: 20rpx;	532	margin-bottom: 20rpx;
533	.screen_bar {	533	.screen_bar {
534	width: 670rpx;	534	width: 670rpx;
535	margin-top: 20rpx;	535	margin-top: 20rpx;
536	margin-bottom: 24rpx;	536	margin-bottom: 24rpx;
537	display: flex;	537	display: flex;
538	flex-direction: row;	538	flex-direction: row;
539	justify-content: space-between;	539	justify-content: space-between;
540	align-items: center;	540	align-items: center;
541	font-size: 14px;	541	font-size: 14px;
542	color: #333333;	542	color: #333333;
543	transition: all 0.2s;	543	transition: all 0.2s;
544	}	544	}
545	.item_active {	545	.item_active {
546	border-bottom: 4rpx solid #ff6b4a;	546	border-bottom: 4rpx solid #ff6b4a;
547	}	547	}
548	.screen_item {	548	.screen_item {
549	font-size: 32rpx;	549	font-size: 32rpx;
550	color: #333333;	550	color: #333333;
551	display: flex;	551	display: flex;
552	transition: all 0.2s;	552	transition: all 0.2s;
553	// 规格参数	553	// 规格参数
554	.specification {	554	.specification {
555	margin-bottom: 4px;	555	margin-bottom: 4px;
556	.spe_item {	556	.spe_item {
557	image {	557	image {
558	width: 50px;	558	width: 50px;
559	height: 25px;	559	height: 25px;
560	margin-right: 6px;	560	margin-right: 6px;
561	vertical-align: middle;	561	vertical-align: middle;
562	}	562	}
563	span {	563	span {
564	margin-left: 24rpx;	564	margin-left: 24rpx;
565	}	565	}
566	}	566	}
567	}	567	}
568	}	568	}
569	//	569	//
570	}	570	}
571	// 宝贝好评率	571	// 宝贝好评率
572	.evaluate {	572	.evaluate {
573	.evaluate_title {	573	.evaluate_title {
574	font-size: 14px;	574	font-size: 14px;
575	color: #333333;	575	color: #333333;
576	display: flex;	576	display: flex;
577	justify-content: space-between;	577	justify-content: space-between;
578	.title_rate {	578	.title_rate {
579	margin-left: 10rpx;	579	margin-left: 10rpx;
580	}	580	}
581	.evaluate_star {	581	.evaluate_star {
582	width: 90px;	582	width: 90px;
583	display: flex;	583	display: flex;
584	align-items: center;	584	align-items: center;
585	justify-content: space-between;	585	justify-content: space-between;
586	}	586	}
587	view {	587	view {
588	font-size: 14px;	588	font-size: 14px;
589	color: #333333;	589	color: #333333;
590	font-weight: bold;	590	font-weight: bold;
591	}	591	}
592	}	592	}
593	.evaluate_tag {	593	.evaluate_tag {
594	view {	594	view {
595	display: inline-block;	595	display: inline-block;
596	margin-right: 20rpx;	596	margin-right: 20rpx;
597	min-width: 180rpx;	597	min-width: 180rpx;
598	margin-top: 10px;	598	margin-top: 10px;
599	height: 48rpx;	599	height: 48rpx;
600	background: #f2f2f2;	600	background: #f2f2f2;
601	border-radius: 2px;	601	border-radius: 2px;
602	font-family: PingFangSC-Regular;	602	font-family: PingFangSC-Regular;
603	font-size: 12px;	603	font-size: 12px;
604	color: #666666;	604	color: #666666;
605	letter-spacing: -0.23px;	605	letter-spacing: -0.23px;
606	text-align: center;	606	text-align: center;
607	padding: 0 48rpx;	607	padding: 0 48rpx;
608	line-height: 48rpx;	608	line-height: 48rpx;
609	}	609	}
610	}	610	}
611	}	611	}
612	// 商品详情	612	// 商品详情
613	.more_info {	613	.more_info {
614	.more_fixed1 {	614	.more_fixed1 {
615	display: flex;	615	display: flex;
616	justify-content: space-between;	616	justify-content: space-between;
617	align-content: center;	617	align-content: center;
618	margin-bottom: 12px;	618	margin-bottom: 12px;
619	view {	619	view {
620	font-size: 14px;	620	font-size: 14px;
621	color: #333333;	621	color: #333333;
622	font-weight: bold;	622	font-weight: bold;
623	font-family: "PingFangSC-Medium";	623	font-family: "PingFangSC-Medium";
624	line-height: 24px;	624	line-height: 24px;
625	}	625	}
626	image {	626	image {
627	width: 240rpx;	627	width: 240rpx;
628	height: 3px;	628	height: 3px;
629	margin-top: 10px;	629	margin-top: 10px;
630	}	630	}
631	}	631	}
632	.more_all {	632	.more_all {
633	width: 100%;	633	width: 100%;
634	margin-top: 30rpx;	634	margin-top: 30rpx;
635	margin-right: 30rpx;	635	margin-right: 30rpx;
636	margin-bottom: 180rpx;	636	margin-bottom: 180rpx;
637	font-family: "PingFangSC-Regular";	637	font-family: "PingFangSC-Regular";
638	}	638	}
639	}	639	}
640	// 菜单	640	// 菜单
641	.menu {	641	.menu {
642	position: fixed;	642	position: fixed;
643	bottom: 0;	643	bottom: 0;
644	min-height: 74px;	644	min-height: 74px;
645	width: 100%;	645	width: 100%;
646	background: #ffffff;	646	background: #ffffff;
647	padding: 20px 20px 8px 20px;	647	padding: 20px 20px 8px 20px;
648	font-family: "PingFangSC-Regular";	648	font-family: "PingFangSC-Regular";
649	box-sizing: border-box;	649	box-sizing: border-box;
650	display: flex;	650	display: flex;
651	justify-content: space-between;	651	justify-content: space-between;
652	align-content: center;	652	align-content: center;
653	margin: 0;	653	margin: 0;
654	/* iphonex 等安全区设置，底部安全区适配 */	654	/* iphonex 等安全区设置，底部安全区适配 */
655	/* #ifndef APP-NVUE */	655	/* #ifndef APP-NVUE */
656	padding-bottom: constant(safe-area-inset-bottom);	656	padding-bottom: constant(safe-area-inset-bottom);
657	padding-bottom: env(safe-area-inset-bottom);	657	padding-bottom: env(safe-area-inset-bottom);
658	.menu_1 {	658	.menu_1 {
659	width: 20%;	659	width: 20%;
660	height: 100%;	660	height: 100%;
661	text-align: center;	661	text-align: center;
662	color: #989898;	662	color: #989898;
663	.cart_icon {	663	.cart_icon {
664	position: relative;	664	position: relative;
665	text {	665	text {
666	position: absolute;	666	position: absolute;
667	color: white;	667	color: white;
668	font-size: 17px;	668	font-size: 17px;
669	background-color: red;	669	background-color: red;
670	min-height: 24px;	670	min-height: 24px;
671	min-width: 24px;	671	min-width: 24px;
672	line-height: 24px;	672	line-height: 24px;
673	right: -12%;	673	right: -12%;
674	top: -12px;	674	top: -12px;
675	text-align: center;	675	text-align: center;
676	border-radius: 24px;	676	border-radius: 24px;
677	padding: 2px;	677	padding: 2px;
678	}	678	}
679	}	679	}
680	}	680	}
681	image {	681	image {
682	width: 42%;	682	width: 42%;
683	height: 26px;	683	height: 26px;
684	}	684	}
685	.menu_image {	685	.menu_image {
686	font-size: 12px;	686	font-size: 12px;
687	text-align: center;	687	text-align: center;
688	}	688	}
689	.menu_2 {	689	.menu_2 {
690	width: 74%;	690	width: 74%;
691	height: 80rpx;	691	height: 80rpx;
692	display: grid;	692	display: grid;
693	grid-template-columns: 50% 50%;	693	grid-template-columns: 50% 50%;
694	}	694	}
695	.menu_input {	695	.menu_input {
696	display: inline-flex;	696	display: inline-flex;
697	align-items: center;	697	align-items: center;
698	justify-content: space-around;	698	justify-content: space-around;
699	background: #fff0ec;	699	background: #fff0ec;
700	font-size: 16px;	700	font-size: 16px;
701	color: #ff6b4a;	701	color: #ff6b4a;
702	border-radius: 20px 0 0 20px;	702	border-radius: 20px 0 0 20px;
703	}	703	}
704	.menu_now {	704	.menu_now {
705	display: inline-flex;	705	display: inline-flex;
706	align-items: center;	706	align-items: center;
707	justify-content: space-around;	707	justify-content: space-around;
708	background: #ff6b4a;	708	background: #ff6b4a;
709	font-size: 16px;	709	font-size: 16px;
710	color: #ffffff;	710	color: #ffffff;
711	border-radius: 0 20px 20px 0;	711	border-radius: 0 20px 20px 0;
712	}	712	}
713	}	713	}
714	}	714	}
715	</style>	715	</style>
716		716

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @eed6c3c

1	<template>	1	<template>
2	<view>	2	<view>
3	<view	3	<view
4	class="card"	4	class="card"
5	v-if="current == status"	5	v-if="current == status"
6	@click="toOrderInfo(status,order.pay_id)"	6
7	>	7	>
8	<view class="cardHeader">	8	<view class="cardHeader">
9	<text	9	<text
10	class="orderId"	10	class="orderId"
11	v-if="status == '0'\|\|status == '1'"	11	v-if="status == '0'\|\|status == '1'"
12	>订单号：{{order.pay_id}}</text>	12	>订单号：{{order.pay_id}}</text>
13	<text	13	<text
14	class="orderId"	14	class="orderId"
15	v-if="status == '2'\|\|status == '3'"	15	v-if="status == '2'\|\|status == '3'"
16	>下单时间：{{order.pay_time}}</text>	16	>下单时间：{{order.pay_time}}</text>
17	<text	17	<text
18	class="orderType"	18	class="orderType"
19	v-if="status=='0'"	19	v-if="status=='0'"
20	>待付款</text>	20	>待付款</text>
21	<text	21	<text
22	class="orderType"	22	class="orderType"
23	v-if="status=='1'"	23	v-if="status=='1'"
24	>待收货</text>	24	>待收货</text>
25	<text	25	<text
26	class="orderType"	26	class="orderType"
27	v-if="status == '2'\|\|status == '3'"	27	v-if="status == '2'\|\|status == '3'"
28	>已完成</text>	28	>已完成</text>
29	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	29	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30	</view>	30	</view>
31	<view	31	<view
32	class="orderCardInfo"	32	class="orderCardInfo"
		33	@click="toOrderInfo(status,order.pay_id)"
33	v-for="(orderInfo, index) in orderInfoList"	34	v-for="(orderInfo, index) in orderInfoList"
34	:key="index"	35	:key="index"
35	>	36	>
36	<image	37	<image
37	:src="orderInfo.imgUrl"	38	:src="orderInfo.imgUrl"
38	mode="aspectFill"	39	mode="aspectFill"
39	></image>	40	></image>
40	<view class="infoText">	41	<view class="infoText">
41	<view class="orderName">{{orderInfo.p_name}}</view>	42	<view class="orderName">{{orderInfo.p_name}}</view>
42	<view class="orderDescrib">{{orderInfo.p_name}}</view>	43	<view class="orderDescrib">{{orderInfo.p_name}}</view>
43	<view class="infoText-bottom">	44	<view class="infoText-bottom">
44	<view class="markPrice">{{orderInfo.nowPrice}}</view>	45	<view class="markPrice">{{orderInfo.nowPrice}}</view>
45	<view class="buy-num">X {{orderInfo.num}}</view>	46	<view class="buy-num">X {{orderInfo.num}}</view>
46	</view>	47	</view>
47	</view>	48	</view>
48	</view>	49	</view>
49	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	50	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
50	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->	51	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->
51	<view	52	<view
52	class="btns"	53	class="btns"
53	v-if="status == '0'"	54	v-if="status == '0'"
54	>	55	>
55	<view class="btn-type1" @click="cancleOrder">取消订单</view>	56	<view class="btn-type1" @click="cancleOrder">取消订单</view>
56	<view class="btn-type2" @click="paylog">去支付</view>	57	<view class="btn-type2" @click="paylog">去支付</view>
57	</view>	58	</view>
58	<view	59	<view
59	class="btns"	60	class="btns"
60	v-if="status == '1'"	61	v-if="status == '1'"
61	>	62	>
62	<view class="btn-type2">确认收货</view>	63	<view class="btn-type2">确认收货</view>
63	</view>	64	</view>
64	<view	65	<view
65	class="btns"	66	class="btns"
66	v-if="status == '2'"	67	v-if="status == '2'"
67	>	68	>
68	<view class="btn-type2" @click="toDetail">再次购买</view>	69	<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
69	</view>	70	</view>
70	<!-- <view class="btns" v-if="status == '3'">	71	<!-- <view class="btns" v-if="status == '3'">
71	<view class="btn-type2">再次购买</view>	72	<view class="btn-type2">再次购买</view>
72	</view> -->	73	</view> -->
73	</view>	74	</view>
74	<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">	75	<view class="card" v-if="current == '10'" >
75	<view class="cardHeader">	76	<view class="cardHeader">
76	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.pay_id}}</text>	77	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.pay_id}}</text>
77	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>	78	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>
78	<text class="orderType" v-if="status=='0'">待付款</text>	79	<text class="orderType" v-if="status=='0'">待付款</text>
79	<text class="orderType" v-if="status=='1'">待收货</text>	80	<text class="orderType" v-if="status=='1'">待收货</text>
80	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>	81	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>
81	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	82	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
82	</view>	83	</view>
83	<view class="orderCardInfo" v-for="(orderInfo) in orderInfoList" :key="orderInfo">	84	<view class="orderCardInfo" @click="toOrderInfo(status,order.pay_id)" v-for="(orderInfo) in orderInfoList" :key="orderInfo">
84	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>	85	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
85	<view class="infoText">	86	<view class="infoText">
86	<view class="orderName">{{orderInfo.p_name}}</view>	87	<view class="orderName">{{orderInfo.p_name}}</view>
87	<view class="orderDescrib">{{orderInfo.p_name}}</view>	88	<view class="orderDescrib">{{orderInfo.p_name}}</view>
88	<view class="infoText-bottom">	89	<view class="infoText-bottom">
89	<view class="markPrice">{{orderInfo.nowPrice}}</view>	90	<view class="markPrice">{{orderInfo.nowPrice}}</view>
90	<view class="buy-num">X {{orderInfo.num}}</view>	91	<view class="buy-num">X {{orderInfo.num}}</view>
91	</view>	92	</view>
92	</view>	93	</view>
93	</view>	94	</view>
94	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	95	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
95	<view class="btns" v-if="status == '0'">	96	<view class="btns" v-if="status == '0'">
96	<view class="btn-type1" >取消订单</view>	97	<view class="btn-type1" @click="cancleOrder">取消订单</view>
97	<view class="btn-type2">去支付</view>	98	<view class="btn-type2" @click="paylog">去支付</view>
98	</view>	99	</view>
99	<view class="btns" v-if="status == '1'">	100	<view class="btns" v-if="status == '1'">
100	<view class="btn-type2">确认收货</view>	101	<view class="btn-type2">确认收货</view>
101	</view>	102	</view>
102	<view class="btns" v-if="status == '2'\|\|status == '3'">	103	<view class="btns" v-if="status == '2'\|\|status == '3'">
103	<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>	104	<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
104	</view>	105	</view>
105	<!-- <view class="btns" v-if="status == '3'">
106
107	<view class="btn-type2">再次购买</view>
108	</view> -->
109	</view>	106	</view>
110	</view>	107	</view>
111	</template>	108	</template>
112		109
113	<script>	110	<script>
		111	import MD5Util from '../../../utils/md5'
		112	import store from "@/store";
114	export default {	113	export default {
		114	data() {
		115	return {
		116
		117	};
		118	},
115	props: {	119	props: {
116	/**	120	/**
117	* 订单数据	121	* 订单数据
118	*/	122	*/
119	order: {},	123	order: {},
120	/**	124	/**
121	* 当前选择	125	* 当前选择
122	*/	126	*/
123	current:Number	127	current:Number
124		128
125	},	129	},
126	created() {	130	created() {
127	console.log('order',this.order);	131	console.log('order',this.order);
128	// console.log(this.order.status );	132	// console.log(this.order.status );
129	// console.log(this.current);	133	// console.log(this.current);
130	},	134	},
131	computed:{	135	computed:{
132	status(){	136	status(){
133	return this.order.status	137	return this.order.status
134	},	138	},
135	orderInfoList(){	139	orderInfoList(){
136	return this.order.order_info	140	return this.order.order_info
137	}	141	}
138	},	142	},
139	data() {
140	return {
141	};
142	},
143	methods:{	143	methods:{
144	cancleOrder() {	144	async paylog() {
145	// const openid = uni.getStorageSync('openid')	145	const openid = uni.getStorageSync('openid')
146	// const uid = this.order.uid;	146	const uid = this.order.uid;
147	// const openid = openid;	147	//先拿订单详情
148	// const keyname = this.orderInfo.order_info.keyname	148	await store.dispatch('orderRead/getOrderInfo', {
149	// // console.log('keyname',this.orderInfo.keyname)	149	pay_id: this.order.pay_id,
150	// uni.showModal({	150	uid: uid,
151	// title: "提示",	151	openid: openid
152	// content: "现在取消，订单不可恢复哦，确认取消吗？",	152	}).then((res)=>{
153	// success: function(res) {	153	// console.log(res)
154	// if (res.confirm) {	154	const { data, exKeyName: keyName } = res.order_info
155	// store.dispatch("cancelOrder/cancel", {	155	const timeStamp = new Date().getTime().toString()
156	// keyname: keyname,	156	const total_fee = res.total_fee
157	// uid: uid,	157	const payId = res.pay_id
158	// openid: openid	158	const nonceStr = 'asfafasfasfasfasf'
159	// });	159	// 支付参数
160	// } else if (res.cancel) {	160	const fieldSet = {
161	// console.log("用户点击取消");	161	openid: openid,
162	// }	162	uid: uid,
163	// }	163	shopid: 0,
164	// });	164	payCate: 2020,
		165	payMoney: total_fee,
		166	payWoodId: `fcdj-${uid}-${keyName}`,
		167	payWoodDesc: '在【非常戴镜】的微信付款凭证',
		168	nonceStr,
		169	signType: 'MD5',
		170	app_uid: 2020,
		171	timeStamp,
		172	keyname: keyName,
		173	billInfo: JSON.stringify(data),
		174	}
		175	// 请求后台支付接口
		176	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
		177	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
		178	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
		179	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
		180
		181	// 微信支付接口
		182	uni.requestPayment({
		183	appId: data.appid,
		184	timeStamp,
		185	nonceStr,
		186	total_fee: total_fee,
		187	package: `prepay_id=${data.prepay_id}`,
		188	signType: 'MD5',
		189	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
		190	success: (res) => {
		191	// 支付成功
		192	uni.showModal({
		193	content: '支付成功',
		194	showCancel: false,
		195	})
		196	// //修改订单状态待付款==>待收货
		197	// store.dispatch("statusConfirm/confirm", {
		198	// uid: this.uid,
		199	// openid: this.openid,
		200	// oldway: "0",
		201	// way: "1",
		202	// pay_id: payId,
		203	// judgeContent: "",
		204	// orderInfo: this.orderInfo.order_info
		205	// })
		206	},
		207	fail: (res) => {
		208	// 支付失败
		209	uni.showModal({
		210	content: '支付失败',
		211	showCancel: false,
		212	})
		213	},
		214	complete: () => {
		215	uni.hideLoading()
		216	},
		217	})
		218	} else {
		219	uni.showModal({
		220	content: '支付失败',
		221	showCancel: false,
		222	})
		223	console.log('支付失败')
		224	uni.hideLoading()
		225	}
		226	})
		227	//修改订单状态待付款==>待收货
		228	// store.dispatch("statusConfirm/confirm", {
		229	// uid: this.uid,
		230	// openid: this.openid,
		231	// oldway: "0",
		232	// way: "1",
		233	// pay_id: this.payId,
		234	// judgeContent: "",
		235	// orderInfo: this.orderInfo.order_info
		236	// })
		237	})
		238	},
		239
		240	async cancleOrder(e) {
		241	const openid = uni.getStorageSync('openid')
		242	const uid = this.order.uid;
		243	//先从订单详情中拿到keyname
		244	await store.dispatch('orderRead/getOrderInfo', {
		245	pay_id: this.order.pay_id,
		246	uid: uid,
		247	openid: openid
		248	}).then((res)=>{
		249	const keyname = res.order_info.keyname
		250	uni.showModal({
		251	title: "提示",
		252	content: "现在取消，订单不可恢复哦，确认取消吗？",
		253	success: function(res) {
		254	if (res.confirm) {
		255	store.dispatch("cancelOrder/cancel", {
		256	keyname: keyname,
		257	uid: uid,
		258	openid: openid
		259	}).then((res)=>{
		260	console.log(res)
		261	if(res.code == 1){
		262	store.dispatch("myOrder/getList", {
		263	way: ""
		264	});
		265	}else{
		266	uni.showToast({
		267	title:'取消失败，服务器错误!',
		268	icon:'none'
		269	})
		270	}
		271	});
		272	} else if (res.cancel) {
		273	console.log("用户点击取消");
		274	}
		275	}
		276	});
		277	});
		278
165	},	279	},
166	toDetail(pid){	280	toDetail(pid){
167	console.log('pid',pid)	281	console.log('pid',pid)
168	uni.navigateTo({	282	uni.navigateTo({
169	url: '../details/details?pid='+pid,	283	url: '../details/details?pid='+pid,
170	fail: (res) => {console.log(res)},	284	fail: (res) => {console.log(res)},
171	});	285	});
172	},	286	},
173	toRefundment(){	287	toRefundment(){
174	uni.navigateTo({	288	uni.navigateTo({
175	url: '../refundment/refundment',	289	url: '../refundment/refundment',
176	success: res => {},	290	success: res => {},
177	fail: () => {},	291	fail: () => {},
178	complete: () => {}	292	complete: () => {}
179	});	293	});
180	},	294	},
181	toOrderInfo(status,payId){	295	toOrderInfo(status,payId){
182	console.log(status,payId)	296	console.log(status,payId)
183	switch(status){	297	switch(status){
184	// 0待付款 1待收货 2已收货 3 已评价	298	// 0待付款 1待收货 2已收货 3 已评价
185	case '0':	299	case '0':
186	uni.navigateTo({	300	uni.navigateTo({
187	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	301	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
188	fail(errMsg) {	302	fail(errMsg) {
189	console.log(errMsg)	303	console.log(errMsg)
190	}	304	}
191	})	305	})
192	break;	306	break;
193	case '1':	307	case '1':
194	uni.navigateTo({	308	uni.navigateTo({
195	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	309	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
196	fail(errMsg) {	310	fail(errMsg) {
197	console.log(errMsg)	311	console.log(errMsg)
198	}	312	}
199	})	313	})
200		314
201	break;	315	break;
202	case '2' \|\| '3':	316	case '2' \|\| '3':
203	uni.navigateTo({	317	uni.navigateTo({
204	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	318	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
205	fail(errMsg) {	319	fail(errMsg) {
206	console.log(errMsg)	320	console.log(errMsg)
207	}	321	}
208	})	322	})
209	break;	323	break;
210	default:	324	default:
211	break;	325	break;
212		326
213	}	327	}
214	}	328	}
215	}	329	}
216	}	330	}
217		331
218	</script>	332	</script>
219		333
220	<style lang="scss">	334	<style lang="scss">
221	.card {	335	.card {
222	width: 670rpx;	336	width: 670rpx;
223	height: 478rpx;	337	// height: 478rpx;
224	background: #ffffff;	338	background: #ffffff;
225	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);	339	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
226	border-radius: 8px;	340	border-radius: 8px;
227	border-radius: 8px;	341	border-radius: 8px;
228	margin-top: 20rpx;	342	margin-top: 20rpx;
229	padding: 40rpx;	343	padding: 40rpx;
230	box-sizing: border-box;	344	box-sizing: border-box;
231	.cardHeader {	345	.cardHeader {
232	width: 100%;	346	width: 100%;
233	height: 40rpx;	347	height: 40rpx;
234	display: flex;	348	display: flex;
235	justify-content: space-between;	349	justify-content: space-between;
236	align-items: center;	350	align-items: center;
237	.orderId {	351	.orderId {
238	font-size: 12px;	352	font-size: 12px;
239	color: #999999;	353	color: #999999;
240	}	354	}
241	.orderType {	355	.orderType {
242	font-size: 14px;	356	font-size: 14px;
243	color: #ff6b4a;	357	color: #ff6b4a;
244	}	358	}
245	}	359	}
246	.orderCardInfo {	360	.orderCardInfo {
247	width: 100%;	361	width: 100%;
248	height: 188rpx;	362	height: 188rpx;
249	display: flex;	363	display: flex;
250	flex-direction: row;	364	flex-direction: row;
251	justify-content: space-between;	365	justify-content: space-between;
252	align-items: center;	366	align-items: center;
253	margin-top: 40rpx;	367	margin-top: 40rpx;
254	image {	368	image {
255	height: 188rpx;	369	height: 188rpx;
256	width: 188rpx;	370	width: 188rpx;
257	margin-right: 24rpx;	371	margin-right: 24rpx;
258	}	372	}
259	.infoText {	373	.infoText {
260	display: flex;	374	display: flex;
261	flex-direction: column;	375	flex-direction: column;
262	justify-content: space-between;	376	justify-content: space-between;
263	align-items: flex-start;	377	align-items: flex-start;
264	height: 188rpx;	378	height: 188rpx;
265	width: 368rpx;	379	width: 368rpx;
266	}	380	}
267	.orderName {	381	.orderName {
268	font-size: 14px;	382	font-size: 14px;
269	color: #333333;	383	color: #333333;
270	display: -webkit-box;	384	display: -webkit-box;
271	overflow: hidden;	385	overflow: hidden;
272	-webkit-box-orient: vertical;	386	-webkit-box-orient: vertical;
273	-webkit-line-clamp: 2;	387	-webkit-line-clamp: 2;
274	}	388	}
275	.orderDescrib {	389	.orderDescrib {
276	font-size: 12px;	390	font-size: 12px;
277	color: #999999;	391	color: #999999;
278	display: -webkit-box;	392	display: -webkit-box;
279	overflow: hidden;	393	overflow: hidden;
280	-webkit-box-orient: vertical;	394	-webkit-box-orient: vertical;
281	-webkit-line-clamp: 2;	395	-webkit-line-clamp: 2;
282	}	396	}
283	.infoText-bottom {	397	.infoText-bottom {
284	display: flex;	398	display: flex;
285	flex-direction: row;	399	flex-direction: row;
286	justify-content: flex-start;	400	justify-content: flex-start;
287	align-items: center;	401	align-items: center;
288	width: 100%;	402	width: 100%;
289	.markPrice {	403	.markPrice {
290	font-size: 14px;	404	font-size: 14px;
291	color: #ff6b4a;	405	color: #ff6b4a;
292	margin-right: 20rpx;	406	margin-right: 20rpx;
293	}	407	}
294	.buy-num {	408	.buy-num {
295	font-size: 12px;	409	font-size: 12px;
296	color: #999999;	410	color: #999999;
297	}	411	}
298	}	412	}
299	}	413	}
300	.payPrice {	414	.payPrice {
301	text-align: right;	415	text-align: right;
302	margin: 20rpx 0;	416	margin: 20rpx 0;
303	font-size: 14px;	417	font-size: 14px;
304	color: #333333;	418	color: #333333;
305	.priceNum {	419	.priceNum {
306	font-size: 14px;	420	font-size: 14px;
307	color: #ff6b4a;	421	color: #ff6b4a;
308	}	422	}
309	}	423	}
310	.btns {	424	.btns {
311	display: flex;	425	display: flex;
312	justify-content: flex-end;	426	justify-content: flex-end;
313	align-items: center;	427	align-items: center;
314	.btn-type1 {	428	.btn-type1 {
315	height: 48rpx;	429	height: 48rpx;
316	width: 156rpx;	430	width: 156rpx;
317	border: 1px solid #ff6b4a;	431	border: 1px solid #ff6b4a;
318	border-radius: 12px;	432	border-radius: 12px;
319	border-radius: 12px;	433	border-radius: 12px;
320	text-align: center;	434	text-align: center;
321	line-height: 48rpx;	435	line-height: 48rpx;
322	font-size: 12px;	436	font-size: 12px;
323	color: #ff6b4a;	437	color: #ff6b4a;
324	}	438	}
325	.btn-type2 {	439	.btn-type2 {
326	height: 48rpx;	440	height: 48rpx;
327	width: 140rpx;	441	width: 140rpx;
328	background: #ff6b4a;	442	background: #ff6b4a;
329	border-radius: 12px;	443	border-radius: 12px;
330	border-radius: 12px;	444	border-radius: 12px;
331	text-align: center;	445	text-align: center;
332	line-height: 48rpx;	446	line-height: 48rpx;

src/pages/myOrder/myOrder.vue

Diff comments View file @eed6c3c

 <template>
   <view class="content">
     <view class="header">
       <!-- 搜索-->
       <!-- <view class="searchBar">
         <icon class="searchIcon" type="search" size="14"></icon>
         <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
       </view> -->
       <view class="screenBar">
         <view
           v-for="item in screenItems"
           :key="item.current"
           @click="onClickItem(item.current)"
         >
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
           >{{ item.text }}</view>
         </view>
       </view>
     </view>
     <view class="orderList">
       <view
         v-for="(order) in orderList"
         :key="order.pay_id"
       >
         <OrderCard
           :order="order"
           :current="current"
+		  v-if="order.order_info !== null"
         ></OrderCard>
       </view>
     </view>
     <view class="footer">没有更多订单了，去商城看看吧~</view>
   </view>
 </template>
 <script>
 import OrderCard from "./components/OrderCard.vue";
 import store from "@/store";
 export default {
   components: {
     OrderCard: OrderCard
   },
   data() {
     return {
       // 顶部筛选项
       screenItems: [
         { current: "10", text: "全部" },
         { current: "0", text: "待付款" },
         { current: "1", text: "待收货" },
         { current: "2", text: "已完成" }
         // {current:"3",text:'已评价'},
         // {current:"4",text:'退款'},
       ],
       // 当前所在item 默认10-->全部
       current: "10"
     };
   },
 onShow() {
 	store.dispatch("myOrder/getList", {
 	  way: ""
 	});
 },
   onLoad: function(option) {
     // 获取订单列表
     // store.dispatch("myOrder/getList", {
     //   way: ""
     // });
     // 从user过来传的status，给current，以显示对应item
     this.current = option.status;
   },
   computed: {
     orderList() {
       console.log('orderList', this.$store.state.myOrder.orderList);
       return this.$store.state.myOrder.orderList;
     }
   },
   methods: {
     // tab点击事件
     onClickItem(e) {
       if (this.current !== e) {
         this.current = e;
       }
     }
   }
 };
 </script>
 <style lang="scss">
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #f7f6f6;
   min-height: 100vh;
   .header {
     background-color: #ffffff;
     width: 100%;
     // height: 232rpx;
     padding: 20rpx 40rpx 16rpx 40rpx;
     box-sizing: border-box;
     position: fixed;
     top: 0;
     left: 0;
     // .searchBar {
     //   width: 670rpx;
     //   display: flex;
     //   justify-content: center;
     //   align-items: center;
     //   box-sizing: border-box;
     //   padding: 0rpx 16rpx;
     //   border: 1px solid #ff6b4a;
     //   border-radius: 8rpx;
     //   background-color: #ffffff;
     // }
     .screenBar {
       width: 670rpx;
       // height: 110rpx;
       height: 70rpx;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       color: #333333;
       font-size: 32rpx;
     }
     .screenItem {
       height: 50rpx;
       font-size: 32rpx;
       color: #333333;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: all 0.2s;
     }
     .active {
       // font-size: 34rpx;
       color: #ec5d3b;
     }
     .searchIpt {
       height: 68rpx;
       width: 670rpx;
       padding: 16rpx;
       font-size: 28rpx;
       box-sizing: border-box;
     }
   }
   .orderList {
     // margin-top: 232rpx;
     margin-top: 132rpx;
   }
   .footer {
     font-size: 14px;
     color: #b8b8b8;
     margin: 40rpx 0;
   }
 }
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @eed6c3c

1	<!-- 订单待付款待收货 -->	1	<!-- 订单待付款待收货 -->
2	<template>	2	<template>
3	<view class="content">	3	<view class="content">
4	<view	4	<view
5	class="headerBanner"	5	class="headerBanner"
6	v-if="status == '2'\|\|'3'"	6	v-if="status == '2'\|\|'3'"
7	>	7	>
8	<view class="bannerLeft">	8	<view class="bannerLeft">
9	<view class="T1">订单已完成</view>	9	<view class="T1">订单已完成</view>
10	</view>	10	</view>
11	<image	11	<image
12	src="../../static/car.png"	12	src="../../static/car.png"
13	mode="aspectFill"	13	mode="aspectFill"
14	></image>	14	></image>
15	</view>	15	</view>
16	<!-- 待付款 -->	16	<!-- 待付款 -->
17	<view class="order-time" v-if="status == '0'" >	17	<view class="order-time" v-if="status == '0'" >
18	<text>请在</text>	18	<text>请在</text>
19	<uni-countdown	19	<uni-countdown
20	color="#EC5D3B"	20	color="#EC5D3B"
21	splitor-color="#EC5D3B"	21	splitor-color="#EC5D3B"
22	:show-day="false"	22	:show-day="false"
23	:hour="0"	23	:hour="0"
24	:second="getTime"	24	:second="getLeftTime"
25	@timeup=timeup >	25	@timeup="timeup" >
26	</uni-countdown>	26	</uni-countdown>
27		27
28	<text>内完成付款</text>	28	<text>内完成付款</text>
29	</view>	29	</view>
30		30
31	<view class="headerBanner" v-if="status == '1'">	31	<view class="headerBanner" v-if="status == '1'">
32	<view class="bannerLeft">	32	<view class="bannerLeft">
33	<view class="T1">卖家已发货</view>	33	<view class="T1">卖家已发货</view>
34	<!-- <view class="T2">还剩确认收货</view> -->	34	<!-- <view class="T2">还剩确认收货</view> -->
35	</view>	35	</view>
36	<image	36	<image
37	src="../../static/car.png"	37	src="../../static/car.png"
38	mode="aspectFill"	38	mode="aspectFill"
39	></image>	39	></image>
40	</view>	40	</view>
41		41
42		42
43	<view class="order">	43	<view class="order">
44	<view class="order-user">	44	<view class="order-user">
45	<view class="order-user-head">	45	<view class="order-user-head">
46	<text class="p1">{{orderAddressInfo.userName}}</text>	46	<text class="p1">{{orderAddressInfo.userName}}</text>
47	<text class="p2">{{orderAddressInfo.telNumber}}</text>	47	<text class="p2">{{orderAddressInfo.telNumber}}</text>
48	</view>	48	</view>
49	<view class="order-user-body">	49	<view class="order-user-body">
50	<image src="../../static/myorder-paying-location.png"></image>	50	<image src="../../static/myorder-paying-location.png"></image>
51	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>	51	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
52	</view>	52	</view>
53	</view>	53	</view>
54	<view class="order-info">	54	<view class="order-info">
55	<view	55	<view
56	class="order-info-head"	56	class="order-info-head"
57	v-for="(orderInfoListItem,index) in orderInfoList"	57	v-for="(orderInfoListItem,index) in orderInfoList"
58	:key="index"	58	:key="index"
59	>	59	>
60	<image	60	<image
61	:src="orderInfoListItem.imgUrl"	61	:src="orderInfoListItem.imgUrl"
62	mode="aspectFill"	62	mode="aspectFill"
63	></image>	63	></image>
64	<view class="order-info-head-r">	64	<view class="order-info-head-r">
65	<text class="p1">{{orderInfoListItem.p_name}}</text>	65	<text class="p1">{{orderInfoListItem.p_name}}</text>
66	<view	66	<view
67	class="p2"	67	class="p2"
68	style="margin: 0;"	68	style="margin: 0;"
69	>	69	>
70	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻	70	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
71	<!-- <view class="arrow"></view> -->	71	<!-- <view class="arrow"></view> -->
72	</view>	72	</view>
73	<view class="infoText-bottom">	73	<view class="infoText-bottom">
74	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>	74	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
75	<view class="buy-num">X {{orderInfoListItem.num}}</view>	75	<view class="buy-num">X {{orderInfoListItem.num}}</view>
76	</view>	76	</view>
77	</view>	77	</view>
78	</view>	78	</view>
79	<!-- <view class="order-info-goodsnum">	79	<!-- <view class="order-info-goodsnum">
80	<text>X1</text>	80	<text>X1</text>
81	</view> -->	81	</view> -->
82	<text class="order-info-freight">	82	<text class="order-info-freight">
83	<text class="p1">运费</text>	83	<text class="p1">运费</text>
84	<text class="p2">免运费</text>	84	<text class="p2">免运费</text>
85	</text>	85	</text>
86	<text class="order-info-discount">	86	<text class="order-info-discount">
87	<text class="p1">优惠</text>	87	<text class="p1">优惠</text>
88	<text class="p2">-￥{{totalDiscount}}</text>	88	<text class="p2">-￥{{totalDiscount}}</text>
89	</text>	89	</text>
90	<text class="order-info-price">	90	<text class="order-info-price">
91	<text class="p1">实付</text>	91	<text class="p1">实付</text>
92	<text class="p2">￥{{orderInfo.order_info.total_fee}}</text>	92	<text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
93		93
94	</text>	94	</text>
95	<text class="order-info-num">	95	<text class="order-info-num">
96	<text>订单号：{{payId}}</text>	96	<text>订单号：{{payId}}</text>
97	</text>	97	</text>
98	<text class="order-info-time">	98	<text class="order-info-time">
99	<text>下单时间：{{orderInfo.order_info.pay_time \| timerChange}}</text>	99	<text>下单时间：{{orderInfo.order_info?orderInfo.order_info.pay_time:'' \| timerChange}}</text>
100
101	</text>	100	</text>
102	<view class="order-info-hr"></view>	101	<view class="order-info-hr"></view>
103	<view class="order-info-contact">	102	<view class="order-info-contact">
104	<image src="../../static/myorder-paying-contact.png"></image>	103	<image src="../../static/myorder-paying-contact.png"></image>
105	<text>联系客服</text>	104	<text>联系客服</text>
106	</view>	105	</view>
107	</view>	106	</view>
108	</view>	107	</view>
109	<view	108	<view
110	class="order-confim"	109	class="order-confim"
111	v-if="status == '0'"	110	v-if="status == '0'"
112	>	111	>
113	<button	112	<button
114	class="b1"	113	class="b1"
115	@click="cancleOrder"	114	@click="cancleOrder"
116	>取消订单</button>	115	>取消订单</button>
117	<button	116	<button
118	class="b2"	117	class="b2"
119	@click="paylog"	118	@click="paylog"
120	>立即支付</button>	119	>立即支付</button>
121	</view>	120	</view>
122		121
123	<view	122	<view
124	class="order-confim"	123	class="order-confim"
125	v-if="status == '1'"	124	v-if="status == '1'"
126	>	125	>
127	<!-- <button class="b1">取消订单</button> -->	126	<!-- <button class="b1">取消订单</button> -->
128	<button	127	<button
129	class="b2"	128	class="b2"
130	@click="confirmOrder"	129	@click="confirmOrder"
131	>确认收货</button>	130	>确认收货</button>
132	</view>	131	</view>
133	<view	132	<view
134	class="order-confim"	133	class="order-confim"
135	v-if="status == '2'"	134	v-if="status == '2'"
136	>	135	>
137	<button	136	<button
138	class="b2"	137	class="b2"
139	@click="toDetail"	138	@click="toDetail"
140	>再次购买</button>	139	>再次购买</button>
141	</view>	140	</view>
142		141
143	</view>	142	</view>
144	</template>	143	</template>
145		144
146	<script>	145	<script>
147	import store from "@/store";	146	import store from "@/store";
148	import MD5Util from '../../utils/md5'	147	import MD5Util from '../../utils/md5'
149	import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";	148	import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
150	export default {	149	export default {
151	components: {	150	components: {
152	UniCountdown	151	UniCountdown
153	},	152	},
154	data() {	153	data() {
155	return {	154	return {
156	payId: "",	155	payId: "",
157	payTime: "",	156	payTime: "",
158	status: "", // status 0 待付款 1 已发货	157	status: "", // status 0 待付款 1 已发货
159	uid: "",	158	uid: "",
160	openid: "",	159	openid: "",
161	lefttime: 0,	160	lefttime: 0,
162	isPay: 0,	161	isPay: 0,
163	orderInfo:Object,	162	orderInfo:{},
164	totalPrice:0,	163	totalPrice:0,
165	};	164	};
166	},	165	},
167	onLoad:async function ({payId,status,isPay}) {	166	onLoad:async function ({payId,status,isPay}) {
168	this.payId = payId	167	this.payId = payId
169	this.status = status	168	this.status = status
170	this.isPay = isPay	169	this.isPay = isPay
171	console.log('++++++++++++++++++',this.status)	170	// console.log('++++++++++++++++++',this.status)
172	const openid = uni.getStorageSync('openid')	171	const openid = uni.getStorageSync('openid')
173	const uid = this.$store.state.user.userInfo.uid	172	const uid = this.$store.state.user.userInfo.uid
174	this.uid = uid	173	this.uid = uid
175	this.openid = openid	174	this.openid = openid
176	await store.dispatch('orderRead/getOrderInfo', {	175	await store.dispatch('orderRead/getOrderInfo', {
177	pay_id: this.payId,	176	pay_id: this.payId,
178	uid: uid,	177	uid: uid,
179	openid: openid	178	openid: openid
180	});	179	});
181	// console.log(this.$store.state.orderRead.orderInfo)	180	// console.log(this.$store.state.orderRead.orderInfo)
182	this.orderInfo = this.$store.state.orderRead.orderInfo	181	this.orderInfo = this.$store.state.orderRead.orderInfo
183	this.totalPrice = this.orderInfo.total_fee	182	this.totalPrice = this.orderInfo.total_fee
184	},	183	},
185	// 若从支付页面跳转过来，返回直接返回到首页	184	// 若从支付页面跳转过来，返回直接返回到首页
186	onBackPress(option) {	185	onBackPress(option) {
187	if (option.from === "backbutton" && this.isPay) {	186	if (option.from === "backbutton" && this.isPay) {
188	uni.switchTab({	187	uni.switchTab({
189	url: "/pages/index/index"	188	url: "/pages/index/index"
190	});	189	});
191	return true; // 阻止默认返回行为	190	return true; // 阻止默认返回行为
192	}	191	}
193	},	192	},
194	computed: {	193	computed: {
195	orderInfoList () {	194	orderInfoList () {
196	return this.orderInfo.order_info.list	195	return this.orderInfo.order_info?this.orderInfo.order_info.list:null
197	},	196	},
198	// 获取订单地址信息	197	// 获取订单地址信息
199	orderAddressInfo () {	198	orderAddressInfo () {
200	return this.orderInfo.order_info.address	199	return this.orderInfo.order_info?this.orderInfo.order_info.address:null
201	},	200	},
202	// 订单付款时间	201	// 订单付款时间
203	getTime () {	202	getLeftTime () {
204	return this.orderInfo.order_info.lefttime	203	return this.orderInfo.order_info?this.orderInfo.order_info.lefttime:1800
205
206	},	204	},
207	// 计算总优惠额	205	// 计算总优惠额
208	totalDiscount() {	206	totalDiscount() {
209	const discountInfoList = this.orderInfo.discount_info;	207	const discountInfoList = this.orderInfo.discount_info;
210	let totalDiscount = 0;	208	let totalDiscount = 0;
211	if (discountInfoList) {	209	if (discountInfoList) {
212	discountInfoList.map((discountItem, index) => {	210	discountInfoList.map((discountItem, index) => {
213	totalDiscount += Number(discountItem.value);	211	totalDiscount += Number(discountItem.value);
214	});	212	});
215	}	213	}
216	// console.log(totalDiscount)	214	// console.log(totalDiscount)
217	return totalDiscount;	215	return totalDiscount;
218	}	216	}
219	},	217	},
220		218
221	methods: {	219	methods: {
222	//再次购买暂时只支持跳转第一个商品	220	//再次购买暂时只支持跳转第一个商品
223	toDetail(){	221	toDetail(){
224	const pid = this.orderInfo.order_info.list[0].pid	222	const pid = this.orderInfo.order_info.list[0].pid
225	uni.navigateTo({	223	uni.navigateTo({
226	url: '../details/details?pid='+pid,	224	url: '../details/details?pid='+pid,
227	fail: (res) => {console.log(res)},	225	fail: (res) => {console.log(res)},
228	});	226	});
229	},	227	},
230	// 取消订单	228	// 取消订单
231	timeup() {	229	timeup() {
232	this.cancleOrder();	230	this.cancleOrder();
233	},	231	},
234	cancleOrder() {	232	cancleOrder() {
235	const uid = this.uid;	233	const uid = this.uid;
236	const openid = this.openid;	234	const openid = this.openid;
237	const keyname = this.orderInfo.order_info.keyname	235	const keyname = this.orderInfo.order_info.keyname
238	// console.log('keyname',this.orderInfo.keyname)	236	// console.log('keyname',this.orderInfo.keyname)
239	uni.showModal({	237	uni.showModal({
240	title: "提示",	238	title: "提示",
241	content: "现在取消，订单不可恢复哦，确认取消吗？",	239	content: "现在取消，订单不可恢复哦，确认取消吗？",
242	success: function(res) {	240	success: function(res) {
243	if (res.confirm) {	241	if (res.confirm) {
244	store.dispatch("cancelOrder/cancel", {	242	store.dispatch("cancelOrder/cancel", {
245	keyname: keyname,	243	keyname: keyname,
246	uid: uid,	244	uid: uid,
247	openid: openid	245	openid: openid
248	});	246	});
249	uni.navigateBack({	247	uni.navigateBack({
250	delta:1	248	delta:1
251	})	249	})
252	} else if (res.cancel) {	250	} else if (res.cancel) {
253	console.log("用户点击取消");	251	console.log("用户点击取消");
254	}	252	}
255	}	253	}
256	});	254	});
257	},	255	},
258	paylog() {	256	paylog() {
259	console.log('pay',this.orderInfo)	257	console.log('pay',this.orderInfo)
260	const { data, exKeyName: keyName } = this.orderInfo	258	const { data, exKeyName: keyName } = this.orderInfo
261	const uid = uni.getStorageSync('uid')	259	const uid = uni.getStorageSync('uid')
262	const timeStamp = new Date().getTime().toString()	260	const timeStamp = new Date().getTime().toString()
263	const nonceStr = 'asfafasfasfasfasf'	261	const nonceStr = 'asfafasfasfasfasf'
264	// 支付参数	262	// 支付参数
265	const fieldSet = {	263	const fieldSet = {
266	openid: this.$store.state.user.userInfo.openid,	264	openid: this.$store.state.user.userInfo.openid,
267	uid: this.$store.state.user.userInfo.uid,	265	uid: this.$store.state.user.userInfo.uid,
268	shopid: 0,	266	shopid: 0,
269	payCate: 2020,	267	payCate: 2020,
270	payMoney: this.totalPrice,	268	payMoney: this.totalPrice,
271	payWoodId: `fcdj-${uid}-${keyName}`,	269	payWoodId: `fcdj-${uid}-${keyName}`,
272	payWoodDesc: '在【非常戴镜】的微信付款凭证',	270	payWoodDesc: '在【非常戴镜】的微信付款凭证',
273	nonceStr,	271	nonceStr,
274	signType: 'MD5',	272	signType: 'MD5',
275	app_uid: 2020,	273	app_uid: 2020,
276	timeStamp,	274	timeStamp,
277	keyname: keyName,	275	keyname: keyName,
278	billInfo: JSON.stringify(data),	276	billInfo: JSON.stringify(data),
279	}	277	}
280	// 请求后台支付接口	278	// 请求后台支付接口
281	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {	279	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
282	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {	280	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
283	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`	281	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
284	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'	282	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
285		283
286	// 微信支付接口	284	// 微信支付接口
287	uni.requestPayment({	285	uni.requestPayment({
288	appId: data.appid,	286	appId: data.appid,
289	timeStamp,	287	timeStamp,
290	nonceStr,	288	nonceStr,
291	total_fee: this.totalPrice,	289	total_fee: this.totalPrice,
292	package: `prepay_id=${data.prepay_id}`,	290	package: `prepay_id=${data.prepay_id}`,
293	signType: 'MD5',	291	signType: 'MD5',
294	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),	292	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
295	success: (res) => {	293	success: (res) => {
296	// 支付成功	294	// 支付成功
297	uni.showModal({	295	uni.showModal({
298	content: '支付成功',	296	content: '支付成功',
299	showCancel: false,	297	showCancel: false,
300	})	298	})
301	// 跳转订单详情页->状态待收货	299	// 跳转订单详情页->状态待收货
302	uni.reLaunch({	300	uni.reLaunch({
303	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,	301	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
304	})	302	})
305	},	303	},
306	fail: (res) => {	304	fail: (res) => {
307	// 支付失败	305	// 支付失败
308	uni.showModal({	306	uni.showModal({
309	content: '支付失败',	307	content: '支付失败',
310	showCancel: false,	308	showCancel: false,
311	})	309	})
312	// 跳转订单详情页->刷新本页面	310	// 跳转订单详情页->刷新本页面
313	// uni.redirectTo({	311	// uni.redirectTo({
314	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,	312	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
315	// })	313	// })
316	},	314	},
317	complete: () => {	315	complete: () => {
318	uni.hideLoading()	316	uni.hideLoading()
319	},	317	},
320	})	318	})
321	} else {	319	} else {
322	uni.showModal({	320	uni.showModal({
323	content: '支付失败',	321	content: '支付失败',
324	showCancel: false,	322	showCancel: false,
325	})	323	})
326	console.log('支付失败')	324	console.log('支付失败')
327	uni.hideLoading()	325	uni.hideLoading()
328	// uni.redirectTo({	326	// uni.redirectTo({
329	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,	327	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
330	// })	328	// })
331	}	329	}
332	})	330	})
333		331
334	//修改订单状态待付款==>待收货	332	//修改订单状态待付款==>待收货
335	store.dispatch("statusConfirm/confirm", {	333	store.dispatch("statusConfirm/confirm", {
336	uid: this.uid,	334	uid: this.uid,
337	openid: this.openid,	335	openid: this.openid,
338	oldway: "0",	336	oldway: "0",
339	way: "1",	337	way: "1",
340	pay_id: this.payId,	338	pay_id: this.payId,
341	judgeContent: "",	339	judgeContent: "",
342	orderInfo: this.orderInfo.order_info	340	orderInfo: this.orderInfo.order_info
343	})	341	})
344	.then(	342	.then(
345	// setTimeout(() => {	343	// setTimeout(() => {
346	// uni.navigateBack();	344	// uni.navigateBack();
347	// }, 1500)	345	// }, 1500)
348	);	346	);
349	},	347	},
350	confirmOrder() {	348	confirmOrder() {
351	//确认收货 way1 ==>way2	349	//确认收货 way1 ==>way2
352	store	350	store
353	.dispatch("statusConfirm/confirm", {	351	.dispatch("statusConfirm/confirm", {
354	uid: this.uid,	352	uid: this.uid,
355	openid: this.openid,	353	openid: this.openid,
356	oldway: "1",	354	oldway: "1",
357	way: "2",	355	way: "2",
358	pay_id: this.payId,	356	pay_id: this.payId,
359	judgeContent: "",	357	judgeContent: "",
360	orderInfo: this.orderInfo.order_info	358	orderInfo: this.orderInfo.order_info
361	})	359	})
362	.then((res)=>{	360	.then((res)=>{
363	if(res.data.code === 1){	361	if(res.data.code === 1){
364	uni.showToast({	362	uni.showToast({
365	title:'已确认',	363	title:'已确认',
366	mask:true,	364	mask:true,
367	duration:1500,	365	duration:1500,
368	icon:'success'	366	icon:'success'
369	})	367	})
370	}else{	368	}else{
371	uni-uni.showToast({	369	uni-uni.showToast({
372	title: '服务器错误，确认失败!',	370	title: '服务器错误，确认失败!',
373	mask:true	371	mask:true
374	});	372	});
375	}	373	}
376	setTimeout(() => {	374	setTimeout(() => {
377	uni.navigateBack();	375	uni.navigateBack();
378	}, 1500)	376	}, 1500)
379	});	377	});
380	}	378	}
381	},	379	},
382	filters: {	380	filters: {
383	timerChange: function(value) {	381	timerChange: function(value) {
384	var newDate = new Date();	382	var newDate = new Date();
385	newDate.setTime(value * 1000);	383	newDate.setTime(value * 1000);
386	return newDate.toLocaleString();	384	return newDate.toLocaleString();
387	}	385	}
388	}	386	}
389	};	387	};
390	</script>	388	</script>
391		389
392	<style lang="scss" scoped>	390	<style lang="scss" scoped>
393	.content {	391	.content {
394	min-height: 100vh;	392	min-height: 100vh;
395	display: flex;	393	display: flex;
396	flex-direction: column;	394	flex-direction: column;
397	justify-content: flex-start;	395	justify-content: flex-start;
398	align-items: center;	396	align-items: center;
399	background-color: #f2f2f2;	397	background-color: #f2f2f2;
400	}	398	}
401		399
402	.order {	400	.order {
403	margin-bottom: 112rpx;	401	margin-bottom: 112rpx;
404	background: #f2f2f2;	402	background: #f2f2f2;
405	margin-top: 140rpx;	403	margin-top: 140rpx;
406	width: 670rpx;	404	width: 670rpx;
407	}	405	}
408		406
409	.order-time {	407	.order-time {
410	width: 100%;	408	width: 100%;
411	height: 140rpx;	409	height: 140rpx;
412	background-color: #fff;	410	background-color: #fff;
413	display: flex;	411	display: flex;
414	justify-content: center;	412	justify-content: center;
415	align-items: center;	413	align-items: center;
416	position: fixed;	414	position: fixed;
417	top: 0;	415	top: 0;
418	left: 0;	416	left: 0;
419	text {	417	text {
420	// font-family: PingFangSC-Regular;	418	// font-family: PingFangSC-Regular;
421	// margin-top: 48rpx;	419	// margin-top: 48rpx;
422	font-size: 14px;	420	font-size: 14px;
423	color: #333333;	421	color: #333333;
424	letter-spacing: -0.26px;	422	letter-spacing: -0.26px;
425	}	423	}
426	.p2 {	424	.p2 {
427	// font-family: DINAlternate-Bold;	425	// font-family: DINAlternate-Bold;
428	margin: 42rpx 20rpx 0 20rpx;	426	margin: 42rpx 20rpx 0 20rpx;
429	font-size: 18px;	427	font-size: 18px;
430	color: #ec5d3b;	428	color: #ec5d3b;
431	letter-spacing: -0.34px;	429	letter-spacing: -0.34px;
432	}	430	}
433	}	431	}
434	.headerBanner {	432	.headerBanner {
435	width: 100%;	433	width: 100%;
436	height: 140rpx;	434	height: 140rpx;
437	background: #4a90e2;	435	background: #4a90e2;
438	padding: 26rpx 60rpx 24rpx 60rpx;	436	padding: 26rpx 60rpx 24rpx 60rpx;
439	box-sizing: border-box;	437	box-sizing: border-box;
440	color: #ffffff;	438	color: #ffffff;
441	display: flex;	439	display: flex;
442	justify-content: space-between;	440	justify-content: space-between;
443	align-items: center;	441	align-items: center;
444	position: fixed;	442	position: fixed;
445	top: 0;	443	top: 0;
446	left: 0;	444	left: 0;
447	.bannerLeft {	445	.bannerLeft {
448	font-size: 36rpx;	446	font-size: 36rpx;
449	display: flex;	447	display: flex;
450	flex-direction: column;	448	flex-direction: column;
451	justify-content: center;	449	justify-content: center;
452	align-items: center;	450	align-items: center;
453	.T2 {	451	.T2 {
454	font-size: 24rpx;	452	font-size: 24rpx;
455	}	453	}
456	}	454	}
457	image {	455	image {
458	height: 56rpx;	456	height: 56rpx;
459	width: 72rpx;	457	width: 72rpx;
460	}	458	}
461	}	459	}
462		460
463	.order-user {	461	.order-user {
464	height: 228rpx;	462	height: 228rpx;
465	background: #ffffff;	463	background: #ffffff;
466	border-radius: 14rpx;	464	border-radius: 14rpx;
467	margin: 0 auto;	465	margin: 0 auto;
468	margin-top: 20rpx;	466	margin-top: 20rpx;
469	margin-bottom: 20rpx;	467	margin-bottom: 20rpx;
470	.order-user-head {	468	.order-user-head {
471	display: flex;	469	display: flex;
472	height: 108rpx;	470	height: 108rpx;
473	align-items: center;	471	align-items: center;
474	margin-left: 126rpx;	472	margin-left: 126rpx;
475	.p1 {	473	.p1 {
476	// font-family: PingFangSC-Regular;	474	// font-family: PingFangSC-Regular;
477	font-size: 14px;	475	font-size: 14px;
478	color: #333333;	476	color: #333333;
479	letter-spacing: -0.26px;	477	letter-spacing: -0.26px;
480	margin-right: 20rpx;	478	margin-right: 20rpx;
481	}	479	}
482	.p2 {	480	.p2 {
483	// font-family: PingFangSC-Regular;	481	// font-family: PingFangSC-Regular;
484	font-size: 14px;	482	font-size: 14px;
485	color: #999999;	483	color: #999999;
486	letter-spacing: -0.26px;	484	letter-spacing: -0.26px;
487	}	485	}
488	}	486	}
489	.order-user-body {	487	.order-user-body {
490	display: flex;	488	display: flex;
491	width: 100%;	489	width: 100%;
492	image {	490	image {
493	width: 24px;	491	width: 24px;
494	height: 26px;	492	height: 26px;
495	margin: 12rpx 32rpx 0 40rpx;	493	margin: 12rpx 32rpx 0 40rpx;
496	}	494	}
497	.p3 {	495	.p3 {
498	// font-family: PingFangSC-Semibold;	496	// font-family: PingFangSC-Semibold;
499	font-size: 14px;	497	font-size: 14px;
500	color: #333333;	498	color: #333333;
501	letter-spacing: -0.26px;	499	letter-spacing: -0.26px;
502	}	500	}
503	}	501	}
504	}	502	}
505		503
506	.order-info {	504	.order-info {
507	background-color: #fff;	505	background-color: #fff;
508	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);	506	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
509	border-radius: 16rpx;	507	border-radius: 16rpx;
510	margin: 0 auto;	508	margin: 0 auto;
511	view {	509	view {
512	margin-left: 40rpx;	510	margin-left: 40rpx;
513	}	511	}
514	text {	512	text {
515	font-size: 14px;	513	font-size: 14px;
516	}	514	}
517	.order-info-head {	515	.order-info-head {
518	display: flex;	516	display: flex;
519	padding-top: 40rpx;	517	padding-top: 40rpx;
520	image {	518	image {
521	height: 188rpx;	519	height: 188rpx;
522	width: 188rpx;	520	width: 188rpx;
523	}	521	}
524	.order-info-head-r {	522	.order-info-head-r {
525	margin: 0;	523	margin: 0;
526	width: 368rpx;	524	width: 368rpx;
527	margin-left: 24rpx;	525	margin-left: 24rpx;
528	// margin-top: 40rpx;	526	// margin-top: 40rpx;
529	text {	527	text {
530	display: block;	528	display: block;
531	}	529	}
532	// .arrow{	530	// .arrow{
533	// width: 0;	531	// width: 0;
534	// height: 0;	532	// height: 0;
535	// border-left: 5px transparent;	533	// border-left: 5px transparent;
536	// border-right: 5px transparent;	534	// border-right: 5px transparent;
537	// border-top: 5px #979797;	535	// border-top: 5px #979797;
538	// border-bottom: 0 transparent;	536	// border-bottom: 0 transparent;
539	// border-style: solid;	537	// border-style: solid;
540	// position: relative;	538	// position: relative;
541	// // transform: scaleY(-1);	539	// // transform: scaleY(-1);
542	// }	540	// }
543	// .arrow::after{	541	// .arrow::after{
544	// content: '';	542	// content: '';
545	// position: absolute;	543	// position: absolute;
546	// top: -6.5px;	544	// top: -6.5px;
547	// left: -5px;	545	// left: -5px;
548	// border-left: 5px transparent;	546	// border-left: 5px transparent;
549	// border-right: 5px transparent;	547	// border-right: 5px transparent;
550	// border-top: 5px #FFFFFF;	548	// border-top: 5px #FFFFFF;
551	// border-bottom: 0 transparent;	549	// border-bottom: 0 transparent;
552	// border-style: solid;	550	// border-style: solid;
553	// }	551	// }
554	.p1 {	552	.p1 {
555	min-height: 40px;	553	min-height: 40px;
556	// font-family: PingFangSC-Regular;	554	// font-family: PingFangSC-Regular;
557	font-size: 14px;	555	font-size: 14px;
558	color: #333333;	556	color: #333333;
559	letter-spacing: -0.26px;	557	letter-spacing: -0.26px;
560	line-height: 18px;	558	line-height: 18px;
561	// line-height: 20px;	559	// line-height: 20px;
562	}	560	}
563	.p2 {	561	.p2 {
564	height: 34px;	562	height: 34px;
565	padding: 1px 0 3px 0;	563	padding: 1px 0 3px 0;
566	// font-family: PingFangSC-Regular;	564	// font-family: PingFangSC-Regular;
567	font-size: 12px;	565	font-size: 12px;
568	color: #999999;	566	color: #999999;
569	letter-spacing: -0.23px;	567	letter-spacing: -0.23px;
570	}	568	}
571	.infoText-bottom {	569	.infoText-bottom {
572	display: flex;	570	display: flex;
573	flex-direction: row;	571	flex-direction: row;
574	justify-content: flex-start;	572	justify-content: flex-start;
575	align-items: center;	573	align-items: center;
576	width: 100%;	574	width: 100%;
577	margin-left: 0;	575	margin-left: 0;
578	.markPrice {	576	.markPrice {
579	font-size: 14px;	577	font-size: 14px;
580	color: #ff6b4a;	578	color: #ff6b4a;
581	margin-right: 20rpx;	579	margin-right: 20rpx;
582	margin-left: 0rpx;	580	margin-left: 0rpx;
583	}	581	}
584	.buy-num {	582	.buy-num {
585	font-size: 12px;	583	font-size: 12px;
586	color: #999999;	584	color: #999999;
587	}	585	}
588	}	586	}
589	}	587	}
590	}	588	}
591	// .order-info-goodsnum {	589	// .order-info-goodsnum {
592	// display: flex;	590	// display: flex;
593	// align-items: center;	591	// align-items: center;
594	// justify-content: flex-end;	592	// justify-content: flex-end;
595	// text {	593	// text {
596	// margin-right: 44rpx;	594	// margin-right: 44rpx;
597	// // ont-family: PingFangSC-Regular;	595	// // ont-family: PingFangSC-Regular;
598	// font-size: 12px;	596	// font-size: 12px;
599	// color: #999999;	597	// color: #999999;
600	// letter-spacing: -0.23px;	598	// letter-spacing: -0.23px;
601	// }	599	// }
602	// }	600	// }
603	.order-info-freight {	601	.order-info-freight {
604	display: block;	602	display: block;
605	margin-left: 40rpx;	603	margin-left: 40rpx;
606	margin-top: 22rpx;	604	margin-top: 22rpx;
607	.p1 {	605	.p1 {
608	// font-family: PingFangSC-Regular;	606	// font-family: PingFangSC-Regular;
609	font-size: 14px;	607	font-size: 14px;
610	color: #333333;	608	color: #333333;
611	letter-spacing: -0.26px;	609	letter-spacing: -0.26px;
612	line-height: 18px;	610	line-height: 18px;
613	margin-right: 24px;	611	margin-right: 24px;
614	}	612	}
615	.p2 {	613	.p2 {
616	// font-family: PingFangSC-Regular;	614	// font-family: PingFangSC-Regular;
617	font-size: 14px;	615	font-size: 14px;
618	color: #ff6b4a;	616	color: #ff6b4a;
619	letter-spacing: -0.26px;	617	letter-spacing: -0.26px;
620	}	618	}
621	}	619	}
622	.order-info-discount {	620	.order-info-discount {
623	display: block;	621	display: block;
624	margin-left: 40rpx;	622	margin-left: 40rpx;
625	margin-top: 24rpx;	623	margin-top: 24rpx;
626	.p1 {	624	.p1 {
627	// font-family: PingFangSC-Regular;	625	// font-family: PingFangSC-Regular;
628	font-size: 14px;	626	font-size: 14px;
629	color: #333333;	627	color: #333333;
630	letter-spacing: -0.26px;	628	letter-spacing: -0.26px;
631	line-height: 18px;	629	line-height: 18px;
632	margin-right: 24px;	630	margin-right: 24px;
633	}	631	}
634	.p2 {	632	.p2 {
635	// font-family: PingFangSC-Regular;	633	// font-family: PingFangSC-Regular;
636	font-size: 14px;	634	font-size: 14px;
637	color: #ff6b4a;	635	color: #ff6b4a;
638	letter-spacing: -0.26px;	636	letter-spacing: -0.26px;
639	}	637	}
640	}	638	}
641	.order-info-price {	639	.order-info-price {
642	display: block;	640	display: block;
643	margin-left: 40rpx;	641	margin-left: 40rpx;
644	margin-top: 24rpx;	642	margin-top: 24rpx;
645	.p1 {	643	.p1 {
646	// font-family: PingFangSC-Semibold;	644	// font-family: PingFangSC-Semibold;
647	font-size: 14px;	645	font-size: 14px;
648	color: #333333;	646	color: #333333;
649	letter-spacing: -0.26px;	647	letter-spacing: -0.26px;
650	line-height: 18px;	648	line-height: 18px;
651	margin-right: 24px;	649	margin-right: 24px;
652	}	650	}
653	.p2 {	651	.p2 {
654	// font-family: PingFangSC-Semibold;	652	// font-family: PingFangSC-Semibold;
655	font-size: 14px;	653	font-size: 14px;
656	color: #ff6b4a;	654	color: #ff6b4a;
657	letter-spacing: -0.26px;	655	letter-spacing: -0.26px;
658	}	656	}
659	}	657	}
660	.order-info-num {	658	.order-info-num {
661	display: block;	659	display: block;
662	margin-left: 40rpx;	660	margin-left: 40rpx;
663	margin-top: 44rpx;	661	margin-top: 44rpx;
664	text {	662	text {
665	// font-family: PingFangSC-Regular;	663	// font-family: PingFangSC-Regular;
666	font-size: 12px;	664	font-size: 12px;
667	color: #999999;	665	color: #999999;
668	letter-spacing: -0.23px;	666	letter-spacing: -0.23px;
669	}	667	}
670	}	668	}
671	.order-info-time {	669	.order-info-time {
672	display: block;	670	display: block;
673	margin: 8rpx 0 48rpx 40rpx;	671	margin: 8rpx 0 48rpx 40rpx;
674	text {	672	text {
675	// font-family: PingFangSC-Regular;	673	// font-family: PingFangSC-Regular;
676	font-size: 12px;	674	font-size: 12px;
677	color: #999999;	675	color: #999999;
678	letter-spacing: -0.23px;	676	letter-spacing: -0.23px;
679	}	677	}
680	}	678	}
681	.order-info-hr {	679	.order-info-hr {
682	width: 520rpx;	680	width: 520rpx;
683	height: 1px;	681	height: 1px;
684	background-color: #e9e9e9;	682	background-color: #e9e9e9;
685	margin-bottom: 20rpx;	683	margin-bottom: 20rpx;
686	}	684	}
687	.order-info-contact {	685	.order-info-contact {
688	display: flex;	686	display: flex;
689	padding-bottom: 28rpx;	687	padding-bottom: 28rpx;
690	image {	688	image {
691	width: 19px;	689	width: 19px;
692	height: 16px;	690	height: 16px;
693	}	691	}
694	text {	692	text {
695	// font-family: PingFangSC-Regular;	693	// font-family: PingFangSC-Regular;
696	margin-left: 20rpx;	694	margin-left: 20rpx;
697	font-size: 14px;	695	font-size: 14px;
698	color: #333333;	696	color: #333333;
699	letter-spacing: -0.26px;	697	letter-spacing: -0.26px;
700	line-height: 18px;	698	line-height: 18px;
701	}	699	}
702	}	700	}
703	}	701	}
704		702
705	.order-confim {	703	.order-confim {
706	display: flex;	704	display: flex;
707	align-items: center;	705	align-items: center;
708	justify-content: flex-end;	706	justify-content: flex-end;
709	// z-index: 999;	707	// z-index: 999;
710	width: 100%;	708	width: 100%;
711	height: 112rpx;	709	height: 112rpx;
712	position: fixed;	710	position: fixed;
713	bottom: 0;	711	bottom: 0;
714	background: #ffffff;	712	background: #ffffff;
715	button {	713	button {
716	width: 204rpx;	714	width: 204rpx;
717	height: 80rpx;	715	height: 80rpx;
718	border: 1px solid #ff6b4a;	716	border: 1px solid #ff6b4a;
719	border-radius: 40rpx;	717	border-radius: 40rpx;
720	font-size: 32rpx;	718	font-size: 32rpx;
721	letter-spacing: -0.3px;	719	letter-spacing: -0.3px;
722	margin-right: 0;	720	margin-right: 0;
723	}	721	}
724	.b1 {	722	.b1 {
725	// font-family: PingFangSC-Regular;	723	// font-family: PingFangSC-Regular;
726	color: #ff6b4a;	724	color: #ff6b4a;
727	background-color: #ffffff;	725	background-color: #ffffff;
728	}	726	}
729	.b2 {	727	.b2 {
730	// font-family: PingFangSC-Regular;	728	// font-family: PingFangSC-Regular;
731	background-color: #ff6b4a;	729	background-color: #ff6b4a;
732	color: #ffffff;	730	color: #ffffff;
733	margin: 0 26rpx 0 20rpx;	731	margin: 0 26rpx 0 20rpx;
734	}	732	}
735	}	733	}
736	</style>	734	</style>
737		735

src/pages/user/user.vue

Diff comments View file @eed6c3c

 <template>
   <view class="wrap">
     <!-- 弹窗 -->
     <uni-popup
       ref="popup"
       type="center"
     >
       <!-- 给一个左边弹窗的样式 -->
       <!-- 关闭弹窗按钮 -->
       <view
         class="closeBtn"
         @tap="this.$refs.popup.close()"
       >x</view>
       <view
         class="popUpWrap"
         v-if="whichTap==0"
       >
         <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>
         <!-- 左 -->
         <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
         <!-- 右 -->
         <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
       </view>
       <view
         class="popUpWrap"
         v-if="whichTap==1"
       >
         <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
       </view>
       <view
         class="popUpWrap"
         v-if="whichTap==2"
       >
         <button @tap="chatOur(1)">客服1</button>
         <button @tap="chatOur(2)">客服2</button>
       </view>
     </uni-popup>
     <!-- 	<scroll-view
 	  enable-flex
 	  @scrolltolower="handleScrolltolower"
 	  scroll-y
 	  style="height: 1000px;"
 	> -->
     <view
       v-if="isAuth"
       class="content"
     >
       <view class="userInfo">
         <view class="info">
           <image
             :src="headerphoto"
             mode="aspectFill"
           ></image>
           <view class="infoText">
             <text class="userName">{{nickName}}</text>
           </view>
         </view>
         <!-- <view class="service">
           <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
         </view> -->
       </view>
       <view
         class="myOpticsData"
         @tap="toOpticsData"
       >
         <view class="left">
           <image
             src="../../static/img/user/dataWrite.png"
             mode="aspectFit"
           ></image>
           <text>验光数据</text>
         </view>
         <image
           src="../../static/right.png"
           mode="aspectFit"
         ></image>
       </view>
       <view class="myOrder">
-        <view class="orderHeader">
+        <view class="orderHeader"  @click="toMyOrder('10')" >
           <text>我的订单</text>
-          <view
+          <view class="btn">
-            class="btn"
-            @click="toMyOrder('10')"
-          >
             全部
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view class="orderBody">
           <view
             class="item waitPay"
             @click="toMyOrder('0')"
           >
             <image
               src="../../static/img/user/waitDeliver.png"
               mode="aspectFit"
             ></image>
             <text>待付款</text>
           </view>
           <view
             class="item waitDeliver"
             @click="toMyOrder('1')"
           >
             <image
               src="../../static/img/user/waitPay.png"
               mode="aspectFit"
             ></image>
             <text>待收货</text>
           </view>
           <view
             class="item waitReceive"
             @click="toMyOrder('2')"
           >
             <image
               src="../../static/img/user/waitReceive.png"
               mode="aspectFit"
             ></image>
             <text>已完成</text>
           </view>
           <!-- <view class="item service" @click="toMyOrder('3')">
             <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
             <text>已评价</text>
           </view> -->
         </view>
       </view>
       <view class="someItem">
         <!-- <view class="item">
           <view class="left">
             <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
             <text>推广记录与收益</text>
           </view>
           <image src="../../static/right.png" mode="aspectFit"></image>
         </view> -->
         <view
           @tap="toAddress"
           class="item"
         >
           <image
             src="../../static/address-icon.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>地址管理</text>
             <image
               class="image2"
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view
           @tap="introduce"
           class="item"
         >
           <image
             src="../../static/img/user/introduce.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>系统介绍</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view
           @tap="joinUs"
           class="item"
         >
           <image
             src="../../static/img/user/joinUs.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>加入我们</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view class="item">
           <image
             src="../../static/img/user/service.png"
             mode="aspectFit"
           ></image>
           <view class="left lastLeft">
             <text>联系客服</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
       </view>
       <view class="recommend">
         <view class="title">
           <view class="line"></view>
           <view class="text">精选推荐</view>
           <view class="line"></view>
         </view>
         <!-- 商品列表 -->
         <view class="goods-list">
           <!--          <scroll-view
             enable-flex
             @scrolltolower="handleScrolltolower"
             scroll-y
             class="product-list"
           > -->
           <view class="product-list">
             <view
               class="product"
               v-for="(item, index) in userRecommandList"
               :key="index"
             >
               <Card
                 :goods="item"
                 :scrollTop="scrollTop"
                 :viewHeight="viewHeight"
               ></Card>
             </view>
           </view>
           <!-- </scroll-view> -->
           <view class="loading-text">{{loadingText}}</view>
         </view>
       </view>
     </view>
     <view
       v-else
       class="auth"
     >
       <view class="icon"></view>
       <view class="divider"></view>
       <view class="title">申请获取以下权限</view>
       <view class="text">获得您的公开信息(昵称、头像等)</view>
       <button
         type="primary"
         open-type="getUserInfo"
         @getuserinfo="onGotUserInfo"
       >授权登陆</button>
     </view>
     <!-- </scroll-view> -->
   </view>
 </template>
 <script>
 import Card from '@/components/CommodityCard/CommodityCard.vue'
 import store from '@/store'
 import UniPopup from '@/components/UniPopup/uni-popup.vue'
 export default {
   components: {
     Card,
     UniPopup,
   },
   data() {
     return {
       isAuth: true, // 是否显示授权页面,
       pagesnum: 1, // 分页请求初始值
       whichTap: 0, // 弹窗渲染选择条件
 	  loadingText: '到底了',
 	  scrollTop: 0,
 	  viewHeight: uni.getSystemInfoSync().windowHeight,
     }
   },
   onPageScroll({ scrollTop }) {
   	  // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
   	  this.scrollTop = scrollTop
   },
   onLoad() {
     const that = this
     // 判断是否授权
     uni.getSetting({
       success(res) {
         console.log('authSetting', res.authSetting)
         if (res.authSetting['scope.userInfo'] === true) {
           that.isAuth = true
         } else {
           that.isAuth = false
         }
       },
     })
     store.dispatch('userRecommand/getRecommandList', {
       uid: that.$store.state.user.userInfo.uid,
       openid: that.$store.state.user.userInfo.openid,
       page: that.pagesnum,
     })
   },
   onReachBottom() {
     // console.log('usr-my',this.$store.state.user.userInfo)
     this.pagesnum++
     store.dispatch('userRecommand/getRecommandList', {
 	  uid: this.$store.state.user.userInfo.uid,
 	  openid: this.$store.state.user.userInfo.openid,
 	  page: this.pagesnum,
     })
   },
   computed: {
     nickName() {
       return this.$store.state.user.userInfo.nickName
     },
     headerphoto() {
       return this.$store.state.user.userInfo.headerphoto
     },
     userRecommandList() {
 	  console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
       return this.$store.state.userRecommand.recommandList
     },
   },
   methods: {
     // 弹窗
     changeTap(item) {
       this.whichTap = item
       this.$refs.popup.open()
     },
     chatOur(item) {
       if (item === 1) {
         uni.makePhoneCall({
           phoneNumber: 13376189297, // 客服1 电话
         })
       } else {
         uni.makePhoneCall({
           phoneNumber: 18014995101, // 客服2 电话
         })
       }
     },
     // 授权
     onGotUserInfo(e) {
       if (e.detail.errMsg === 'getUserInfo:ok') {
         const { fromInfo } = this.$store.state.user
         // 用户授权成功
         store.dispatch('user/getUserInfo', fromInfo)
         this.isAuth = true
       }
     },
     toAddress() {
       uni.navigateTo({
         url: '../address/addressList',
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
     introduce() {
       uni.showModal({
         content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
         showCancel: false,
       })
     },
     joinUs() {
       uni.showModal({
         content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
         showCancel: false,
       })
     },
     toMyOrder(status) {
       uni.navigateTo({
         url: `../myOrder/myOrder?status=${status}`,
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
     toOpticsData() {
       uni.navigateTo({
         url: '../addOpticsData/addOpticsData',
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .warp {
   font-size: 24rpx;
   background-color: #f2f2f2;
   height: 100vh;
 }
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #f2f2f2;
 }
 .userInfo {
   background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
   width: 100%;
   height: 240rpx;
   color: #ffffff;
   padding: 60rpx 82rpx 80rpx 44rpx;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-start;
   .info {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     image {
       border-radius: 50rpx;
       height: 100rpx;
       width: 100rpx;
       margin-right: 40rpx;
     }
     .infoText {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-scetart;
       .userName {
         font-size: 18px;
         color: #ffffff;
         margin-bottom: 8rpx;
       }
       .nickName {
         font-size: 12px;
         color: #ffffff;
       }
     }
   }
   // .service {
   //   margin-top: 20rpx;
   //   image {
   //     height: 36rpx;
   //     width: 36rpx;
   //   }
   // }
 }
 .myOpticsData {
   width: 670rpx;
   height: 120rpx;
   background-color: #ffffff;
   border-radius: 6px;
   box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
   position: relative;
   bottom: 44rpx;
   padding: 40rpx;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
   .left {
     font-size: 14px;
     color: #333333;
     display: flex;
     align-items: center;
     image {
       margin-right: 32rpx;
       width: 40rpx;
       height: 44rpx;
     }
   }
   image {
     height: 16px;
     width: 8px;
   }
 }
 .myOrder {
   width: 100%;
   height: 296rpx;
   // margin-top: 116rpx;
   margin-bottom: 20rpx;
   padding: 0 40rpx;
   box-sizing: border-box;
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   border-radius: 6px;
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   .orderHeader {
     width: 100%;
     height: 100rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #f5f5f5;
     font-weight: bold;
     font-size: 18px;
     color: #333333;
     .btn {
       font-size: 12px;
       color: #999999;
       display: flex;
       align-items: center;
       image {
         margin-left: 20rpx;
         height: 32rpx;
         width: 16rpx;
       }
     }
   }
   .orderBody {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     .item {
       display: flex;
       flex-direction: column;
       align-items: center;
       image {
         width: 62rpx;
         height: 46rpx;
       }
       text {
         margin-top: 24rpx;
         font-size: 12px;
         color: #333333;
       }
     }
   }
 }
 .someItem {
   width: 100%;
   height: 336rpx;
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   border-radius: 6px;
   border-radius: 6px;
   margin-bottom: 18rpx;
   box-sizing: border-box;
   padding: 21rpx 48rpx 21rpx 42rpx;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   .item {
     display: grid;
     grid-template-columns: 10% 90%;
     align-items: center;
     height: 72rpx;
     width: 100%;
     .left {
       font-size: 14px;
       color: #333333;
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 72rpx;
       border-bottom: 1px solid #f2f2f2;
       image {
         margin-right: 0;
         height: 16px;
         width: 8px;
       }
     }
     image {
       margin-right: 32rpx;
       width: 40rpx;
       height: 44rpx;
     }
     .lastLeft {
       border-bottom: none;
     }
   }
 }
 .recommend {
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   border-radius: 6px;
   border-radius: 6px;
   width: 100%;
   .title {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: 20rpx 40rpx;
     .line {
       width: 264rpx;
       height: 1rpx;
       border-bottom: 1px solid #eaeaea;
     }
     .text {
       font-family: PingFangSC-Medium;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       text-align: justify;
       line-height: 24px;
     }
   }
   .goods-list {
     .loading-text {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 30px;
       color: #979797;
       font-size: 12px;
     }
     .product-list {
       width: 92%;
       padding: 0 4% 3vw 4%;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       .product {
         width: 48%;
         margin: 0 0 20rpx 0;
         background: #ffffff;
         border: 1px solid #f2f2f2;
       }
     }
   }
 }
 .auth {
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   .icon {
     width: 140rpx;
     height: 140rpx;
     border-radius: 50%;
     margin-top: 100rpx;
     background-color: grey;
   }
   .divider {
     height: 1rpx;
     width: 600rpx;
     margin-top: 80rpx;
     background-color: #e6e3e3;
   }
   .title {
     width: 600rpx;
     margin-top: 50rpx;
     text-align: left;
   }
   .text {
     width: 600rpx;
     margin-top: 30rpx;
     text-align: left;
     color: #e6e3e3;
   }
   button {
     width: 450rpx;
     height: 80rpx;
     line-height: 80rpx;
     margin-top: 80rpx;
     border-radius: 30rpx;
   }
 }
 .closeBtn {
   height: 28rpx;
   width: 28rpx;
   // border: 1px solid red;
   position: absolute;
   top: 20rpx;
   right: 10rpx;
 }
 </style>

src/store/modules/cancelOrder.js

Diff comments View file @eed6c3c

 import urlAlias from '../url';
 import request from '../request';
 const {
   cancelOrder
 } = urlAlias;
-const state = {
-  orderList: [],
-};
-const mutations = {
-  INIT: (state, data) => {
-    state.orderList = data;
-  },
-};
 const actions = {
   cancel({ commit }, param) {
-      request({
+    return new Promise((resolve)=>
-        url: cancelOrder,
+		request({
-        data: param,
+		    url: cancelOrder,
-        success: (res) => {
+		    data: param,
-          console.log(res.data);
+		    success: (res) => {
-          // commit("INIT", res.data.data);
+		      // console.log(res.data);
-        },
+			  resolve(res.data)
-    })
+		    },
+	})  )
   }
 }
 export default {
   namespaced: true,
-  state,
-  mutations,
   actions,

src/store/modules/orderRead.js

Diff comments View file @eed6c3c

 import urlAlias from '../url'
 import request from '../request'
 const {
   orderRead
 } = urlAlias
 const state = {
   orderInfo: {}
 }
 const mutations = {
   INIT: (state, orderInfo) => {
     state.orderInfo = orderInfo
   }
 }
 const actions = {
   getOrderInfo({ commit }, param) {
     return new Promise ((resolve) =>  request({
       url: orderRead,
       data: param,
       success: (res) => {
+		  console.log(res)
         commit("INIT", res.data.data)
 		resolve(res.data.data)
       }
     }))
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }