刘文博 / gulu-vue

Browse Code »

Commit 36e5592037888e5b54ebfd4874c987d8f671e68f

Authored by BigBoss 2020-06-08 18:46:51 +0800

1 parent 56ccc089ea

Exists in master

逻辑完善

Showing 8 changed files with 149 additions and 113 deletions Show diff stats

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @36e5592

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

src/pages.json

Diff comments View file @36e5592

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

src/pages/cart/cart.vue

Diff comments View file @36e5592

 <template>
   <view class="content">
     <block v-if="cartList.length==0">
     </block>
     <block v-else>
       <view class="card">
         <view class="cardHeader">
           <view
             v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
 			@click="pClick"
           >
             <span class="correct"></span>
           </view>
           <image
             src="../../static/store.png"
             mode="aspectFill"
           ></image>
           <text>非常戴镜</text>
         </view>
         <view
           class="cardBody"
           v-for="(item,index) in cartList"
           :key="index"
           @longpress="delCart(item.cart_id,index)"
         >
           <view
             v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
 			@click="childClick(cartList[index],index)"
           >
             <span class="correct"></span>
           </view>
           <view class="imageWrap">
             <image
               :src="item.img_index_url"
               mode="aspectFit"
               style="width: 188rpx;height: 168rpx;"
             ></image>
           </view>
           <view class="goodInfo">
             <!-- <view class="imageWrap">
               <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
             </view> -->
             <view class="infoRight">
               <view
                 class="goodName"
                 @tap="toGoods(item.pid,item.sk_id)"
               >{{item.p_name}}</view>
               <view class="describ"  @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
 				  <view class="desL">
 						<view class="people">
 							使用人：{{item.peopleName}}
 						</view>
 						<view class="skuInfo">
 							{{item.sku_name}}
 						</view>
 				  </view>
 				  <view class="desR">
 						<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
 				  </view>
               </view>
               <view class="priceBox">
                 <view class="price">￥{{item.nowPrice*item.num}}</view>
                 <text class="maxCount">(限购{{maxCount}}副)</text>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.addDisabled"
                     type="default"
                     @tap="counter(index,false,item)"
                   >-</view>
                   <text>{{item.num}}</text>
                   <view
                     class="btn"
                     disabled="this.desDisabled"
                     type="default"
                     @tap="counter(index,true,item)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
         </view>
       </view>
     </block>
     <view class="footer">
       <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
       <view class="footerRight">
           <view class="paybtn" @click="toComfirmOrder">立即结算</view>
       </view>
     </view>
 	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
 	:index="cartIndex"
 	 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom"  @closeBottom="closeBottom"></BottomSheet>
   </view>
 </template>
 <script>
 import store from '@/store'
 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
 export default {
 	components:{
 		BottomSheet,
 	},
   data() {
     return {
 		pid:Number,
 		isCart:Number,
 		sk_id:String,
 		mp_id:String,
 		isShowBottom : false,	//底部弹窗开关
 		cart_id:Number,
 		maxCount: 20,
 		cartIndex:Number,
 		cartList:[]
     }
   },
   computed: {
 	pIsoPen (){
 		if (this.cartList.length > 0){
 			return this.cartList.find(item => !item.isChecked) ? false : true;
 		}
 		return false
 	},
 	goodInfo () {
 	  return this.$store.state.read.goodInfo
 	},
 	totalPrice() {
 		let totalPrice = 0
 		this.cartList.forEach((item)=>{
 			 if(item.isChecked){
 				totalPrice += item.nowPrice * item.num;
 			 }
 		})
 		return totalPrice
 	}
   },
   onShow() {
 	this.cartList = this.$store.state.cart.cartList;
   },
   onLoad: async function() {
     await this.$store.dispatch('cart/getCartList', {
       uid: this.$store.state.user.userInfo.uid, // 用户id
     })
 	this.cartList = this.$store.state.cart.cartList;
 	this.cartList.forEach((item)=>{
 		 item.isChecked = false
 	})
   },
   methods: {
 	  //全选按钮
 	  pClick(){
 		  let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
 		  let oldList = this.cartList;
 		  oldList.forEach((item, index)=>{
 		  	 item.isChecked = !pStatus
 			  this.cartList.splice(index,1, item)
 		  })
 	  },
 	  //单选按钮
 	  childClick(type,index){
 		  this.cartList[index].isChecked = !this.cartList[index].isChecked
 		  //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
 		  this.cartList.splice(index,1, this.cartList[index])
 	  },
 	  //修改购物车
 	  chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
 		  // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
 		  store.dispatch('cart/modiCart', {
 		    uid: this.$store.state.user.userInfo.uid,
 		    openid: this.$store.state.user.userInfo.openid,
 		    mp_id: mp_id,
 		    sk_id: sk_id,
 		    price: price,
 		    pid: pid,
 		    num: num,
 		    cart_id: cart_id,
 			args: {
 			  index: index,
 			},
+		  })
+		  this.$nextTick(function(){
+		  	store.dispatch('cart/getCartList', {
+		  		 uid: this.$store.state.user.userInfo.uid, // 用户id
+		  	}).then(()=>{
+				this.cartList = this.$store.state.cart.cartList;
+			})
 		  })
-		  store.dispatch('cart/getCartList', {
-			uid: this.$store.state.user.userInfo.uid, // 用户id
-		  })
-		  this.$forceUpdate()
-		  // console.log('21212121212',this.cartList)
 	  },
 	  //底部弹窗开关
 	  showBottom(isCart,pid,skId,mp_id,cart_id,index){
 		  store.dispatch('read/fetch', {
 			pid,
 			sk_id: skId,
 		  }).then(()=>{
 			  this.cartIndex = index
 			  this.sk_id = skId;
 			  this.pid = pid;
 			  this.mp_id = mp_id;
 			  this.isCart = isCart;
 			  this.cart_id = cart_id;
 			  this.isShowBottom = true;
 		  })
 	  },
 	  closeBottom(){
 	  	this.isShowBottom = false;
 	  },
     toGoods(id, sk_id) {
       uni.navigateTo({
         url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
 	toComfirmOrder(){
 		this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
 		if(this.$store.state.cart.checkedCartLst.length>0){
 			uni.navigateTo({
 				url:`../confirmOrder/confirmOrder?isCart=true`,
 			})
 		}else{
 			uni.showToast({
 				title:'您还没有选择宝贝哦~',
 				icon:'none'
 			})
 		}
 	},
     counter(index, isadd, item) {
       // console.log('item=====>', item)
       // console.log('num=====>', item.num)
       const nums = parseInt(item.num)
       if (isadd) {
         if (nums >= this.maxCount) {
           this.addDisabled = true
         } else {
           this.addDisabled = true
           store.dispatch('cart/modiCart', {
             uid: this.$store.state.user.userInfo.uid,
             openid: this.$store.state.user.userInfo.openid,
             mp_id: item.mp_id,
             sk_id: item.sk_id,
             price: item.nowPrice,
             pid: item.pid,
             num: nums + 1,
             cart_id: item.cart_id,
             args: {
               index: index,
               isadd: isadd,
             },
           })
           this.addDisabled = false
         }
       } else {
         if (nums <= 1) {
           this.desDisabled = true
         } else {
           this.desDisabled = false
           store.dispatch('cart/modiCart', {
             uid: this.$store.state.user.userInfo.uid,
             openid: this.$store.state.user.userInfo.openid,
             mp_id: item.mp_id,
             sk_id: item.sk_id,
             price: item.nowPrice,
             pid: item.pid,
             num: nums - 1,
             cart_id: item.cart_id,
             args: {
               index: index,
               isadd: isadd,
             },
           })
           this.desDisabled = true
         }
       }
     },
     delCart(cart_id, index) {
       cart_id = parseInt(cart_id)
 	  uni.showModal({
 	    title: '是否删除该商品',
 	    success: function (res) {
 	      if (res.confirm) {
 	        store.dispatch('cart/delCart', {
 	          uid: this.$store.state.user.userInfo.uid,
 	          openid: this.$store.state.user.userInfo.openid,
 	          cart_id: cart_id, // 要修改的购物车id
 	          arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
 	        })
 	      }
 	    }.bind(this),
 	  })
 	  // this.cartList.splice(index,1)
     },
   },
 }
 </script>
 <style lang="scss">
 .content {
   min-height: 100vh;
   background-color: #f2f2f2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 40rpx;
   box-sizing: border-box;
   .partentCheck {
     width: 16px;
     height: 16px;
     border-radius: 22px;
     border: 1px solid #cfcfcf;
     background-color: #ffffff;
     margin: 24rpx 12rpx 24rpx 24rpx;
   }
   .partentChecked {
     width: 18px;
     height: 18px;
     border-radius: 22px;
     background-color: #ff6b4a;
     margin: 24rpx 12rpx 24rpx 24rpx;
     .correct {
       display: inline-block;
       position: relative;
       width: 10rpx;
       height: 2rpx;
       background: #ffffff;
       line-height: 0;
       font-size: 0;
       position: relative;
       top: -7px;
       left: 4px;
       -webkit-transform: rotate(45deg);
     }
     .correct:after {
       content: "/";
       display: block;
       width: 16rpx;
       height: 2rpx;
       background: #ffffff;
       -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
     }
   }
   .card {
     background-color: #ffffff;
     border-radius: 16rpx;
     box-sizing: border-box;
     padding: 36rpx 36rpx 36rpx 18rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 180rpx;
     .cardHeader {
       width: 100%;
       height: 36rpx;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       margin-bottom: 20rpx;
       image {
         height: 32rpx;
         width: 32rpx;
         padding-left: 6px;
         padding-right: 10px;
       }
       text {
         // font-family: PingFangSC-Regular;
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
       }
     }
     .cardBody {
       width: 100%;
       min-height: 300rpx;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .goodInfo {
         width: 390rpx;
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         padding-left: 6px;
         .imageWrap {
           height: 188rpx;
           width: 188rpx;
           margin-right: 28rpx;
           image {
             border-radius: 4px;
             height: 188rpx;
             width: 188rpx;
           }
         }
         .infoRight {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
           min-height: 240rpx;
 		  width: 100%;
           .goodName {
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
             text-align: justify;
             overflow: hidden;
             font-size: 28rpx;
             color: #333333;
           }
           .describ {
             width: 100%;
             min-height: 80rpx;
 			background: #F9F9F9;
 			border-radius: 2px;
             box-sizing: border-box;
             padding: 10rpx;
             font-size: 20rpx;
             letter-spacing: -0.23px;
             color: #999999;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			.desL{
 				view{
 					margin: 10rpx 0 10rpx 0 ;
 				}
 			}
           }
           .priceBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             // margin-top: 26px;
             width: 100%;
             font-size: 14px;
             color: #999999;
             .maxCount {
               color: #999999;
               font-size: 20rpx;
             }
             .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;
               }
             }
           }
         }
       }
     }
   }
   .footer {
     position: fixed;
     left: 0;
     bottom: 0px;
     height: 112rpx;
     width: 100%;
     background-color: #ffffff;
     font-size: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .footerLeft {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 50%;
       color: #333333;
       text {
         color: #ff6b4a;
       }
     }
     .footerRight {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       width: 50%;
       margin-right: 26rpx;
       .paybtn {
         display: flex;
         justify-content: center;
         align-items: center;
         background: #ff6b4a;
         border-radius: 20px;
         border-radius: 20px;
         color: #ffffff;
         width: 204rpx;
         height: 80rpx;
       }
     }
   }
 }
 /* 隐藏滚动条 */

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @36e5592

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

src/pages/details/details.vue

Diff comments View file @36e5592

 <template>
   <view class="container">
     <!-- 基础信息 -->
     <view class="basic_info">
       <!-- 轮播图 -->
       <swiper
         class="swiperImage"
         :indicator-dots="true"
         :autoplay="true"
         :interval="4000"
         :duration="500"
       >
         <swiper-item
           v-for="(item, index) in carousel"
           :key="index"
         >
           <image
             :src="item"
             mode="scaleToFill"
           ></image>
         </swiper-item>
       </swiper>
       <!-- 产品价格及购买人数 -->
       <view class="info_pay">
         <view>￥{{goodsInfo.price || '暂无'}}<span
             v-if="goodsInfo.discountPrice"
             class="info_pay_discount"
           >¥{{goodsInfo.discountPrice}}</span></view>
         <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
       </view>
       <!-- 产品名称 -->
       <view class="info_name">
         <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
         <view
           @tap="confirmShare"
           class="info_name_share"
         >
           <image src="/static/img/detail/share-icon.png"></image>
           <text>分享</text>
         </view>
       </view>
       <!-- 产品售后信息 -->
       <view class="info_after">
         <span>支持7天无理由退货</span>
         <span>顺丰发货</span>
         <span>30天质量保证</span>
       </view>
     </view>
     <!-- 详细信息 -->
     <view class="detail_info">
       <!-- 详细信息菜单 -->
       <view class="screen_bar">
         <view
           v-for="(item, index) in screenItems"
           :key="index"
           @click="tabChange(index)"
         >
           <view
             class="screen_item"
             v-bind:class="{ item_active: item_current === index }"
           >{{ screenItems[index] || '暂无' }}</view>
         </view>
       </view>
       <!-- 商品介绍 -->
       <view
         class="screen_item"
         v-if="item_current === 0"
       >
         <Introduce :tag="tag" />
       </view>
       <!-- 规格参数 -->
       <view
         class="screen_item"
         v-if="item_current === 1"
       >
         <view class="specification">
           <view
             class="spe_item"
             v-for="(item, index) in specification"
             :key="index"
           >
             <image
               class="spe_image"
               v-bind:src="item.img"
             ></image>
             <span>{{item.standard || '暂无'}}</span>
             <span>{{item.slength || '暂无'}}</span>
           </view>
         </view>
       </view>
       <!-- 售后保障 -->
       <view
         class="screen_item"
         v-if="item_current === 2"
       >
         <AfterSails />
       </view>
     </view>
     <!-- 评价 -->
     <template v-if="item_current !== 2">
       <view class="evaluate">
         <!-- 标题 -->
         <view class="evaluate_title">
           <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
           <!-- 星星 -->
           <view class="evaluate_star">
             <view
               class="star"
               v-for="(item, index) in evaluate.star"
               :key="index"
             >
               <image
                 src="../../static/img/detail/d_star.png"
                 mode="aspectFill"
                 style="height: 26rpx; width: 28rpx;"
               ></image>
             </view>
           </view>
         </view>
         <!-- 标签 -->
         <view class="evaluate_tag">
           <view
             v-for="(item, index) in evaluate.tag"
             :key="index"
           >{{item.name}}</view>
         </view>
       </view>
     </template>
     <!-- 商品详情页 -->
     <template v-if="current !==2">
       <view class="more_info">
         <view
           class="more_fixed1"
           @click="consolg(goodInfo.prodIntro1)"
         >
           <image src="/static/img/detail/hr.png"></image>
           <view>商品详情</view>
           <image src="/static/img/detail/hr.png"></image>
         </view>
         <view
           class="more_all"
           v-html="more"
         >
         </view>
       </view>
     </template>
     <!-- 底部菜单 -->
     <view class="menu">
       <view
         @tap="toCart()"
         class="menu_1"
       >
         <view class="cart_icon">
           <image src="/static/tab-cart.png" />
           <text>{{cartNumber}}</text>
         </view>
         <view class="menu_image">购物车</view>
       </view>
       <view class="menu_2">
         <view
           class="menu_input"
           @tap="showBottom(1)"
         >加入购物车</view>
         <view
           class="menu_now"
           @click="showBottom(2)"
         >立即购买</view>
       </view>
     </view>
     <!-- 参数选择 -->
     <template v-if="isShowBottom">
       <BottomSheet
         :isCart="isCart"
         @addCart="addCart"
         :pid="pid"
         :goodInfo="goodInfo"
         :isShowBottom="isShowBottom"
         @closeBottom="closeBottom"
       ></BottomSheet>
     </template>
     <!-- 分享 -->
     <template>
       <uni-popup
         ref="popupShare"
         type="share"
       >
         <uni-popup-share @select="selectShare"></uni-popup-share>
       </uni-popup>
     </template>
     <!-- 分享海报 -->
     <template>
       <uni-popup
         ref="uniPopupPost"
         type="center"
       >
         <uni-popup-post :postUrl="postUrl"></uni-popup-post>
       </uni-popup>
     </template>
   </view>
 </template>
 <script>
 import store from '@/store'
 import Introduce from './components/Introduce' // 商品介绍基本信息组件
 import AfterSails from './components/AfterSails' // 售后保障组件
 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
 import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
 export default {
   components: {
     Introduce,
     AfterSails,
     BottomSheet,
     uniPopupShare,
     uniPopupPost,
   },
   data () {
     return {
       pid: 7, // 产品ID
       skId: undefined, // skuId
       // 详细信息菜单
       item_current: 0,
       screenItems: [
         '商品介绍',
         '规格参数',
         '售后保障',
       ],
       showPostImg: false, // 是否展示分享海报
       isShowBottom: false, // 是否展示参数选择
       isCart: 1, // 参数选择 按钮判断
     }
   },
   onLoad({ pid = this.pid, sk_id: skId }) {
     // 根据页面传参请求页面数据
     this.pid = pid
     this.skId = skId
     // 获取产品详情
     this.getDetails({ pid, skId })
     // 获取购物车数据
     this.getCartNum()
   },
   computed: {
     // 获取轮播图数据
     goodInfo() {
       return this.$store.state.details.goodInfo
     },
     // 获取轮播图数据
     carousel() {
       return this.$store.state.details.carousel
     },
     // 商品基本信息
     goodsInfo() {
       return this.$store.state.details.goodsInfo
     },
     // 商品介绍商品标签
     tag() {
       return this.$store.state.details.tag
     },
     // 规格参数
     specification() {
       return this.$store.state.details.specification
     },
     // 评价
     evaluate() {
       return this.$store.state.details.evaluate
     },
     // 商品详情
     more() {
       return this.$store.state.details.more
     },
     // 购物车数目
     cartNumber() {
       return this.$store.state.details.cartNumber
     },
     // 购物车数目
     skuList() {
       return this.$store.state.details.skuList
     },
     // 分享海报
     postUrl() {
       return this.$store.state.details.postUrl
     },
   },
   methods: {
     // 获取产品详情
     getDetails({ pid, skId }) {
       store.dispatch('details/details', {
         pid,
         sk_id: skId,
       })
       store.dispatch('read/fetch', {
         pid,
         sk_id: skId,
       })
     },
     // 获取购物车数目
     getCartNum() {
       store.dispatch('details/getCartNumber')
     },
     // 切换详细信息菜单
     tabChange (e) {
       if (this.current !== e) {
         this.item_current = e
       }
     },
     // 打开分享界面
     confirmShare() {
       this.$refs.popupShare.open()
     },
     // 选择分享
     selectShare(e, done) {
       switch (e.item.name) {
         // 分享到好物圈
         case 'recommend':
           this.shareRecommend()
           break
         // 分享到朋友圈
         case 'friend':
           break
         // 生成海报
         case 'poster':
           uni.showLoading({
             title: '生成图片中',
           })
           this.sharePost()
           break
         default:
           break
       }
       done()
     },
     // 分享到好物圈
     shareRecommend() {
       if (wx.openBusinessView) {
         wx.openBusinessView({
           businessType: 'friendGoodsRecommend',
           extraData: {
             product: {
               item_code: '58_68',
               title: this.goodsInfo.name,
               image_list: this.carousel,
             },
           },
           success: function (res) {
             uni.showToast({
               title: '好物圈分享成功！',
               icon: 'none',
               duration: 2000,
             })
             // 向服务器报告这个事情
             // TODO:::记录这个用户的推广过程。
             console.log('好物圈分享成功！', res)
           },
           fail: function (res) {
             console.log('好物圈分享失败！', res)
           },
         })
       }
     },
     // 分享到朋友/圈
     shareFriend() {
       this.onShareAppMessage()
     },
     // 朋友圈设置页面
     onShareAppMessage() {
       let myName = this.$store.state.user.userInfo.nickName
       if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
         myName = '【神秘人】'
       } else {
         myName = '【' + myName + '】'
       }
       const uid = uni.getStorageSync('uid')
       return {
         title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
         path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid,
         imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
         success: function (res) {
           if (res.errMsg === 'shareAppMessage:ok') {
             console.log('分享成功！', res)
           }
         },
         fail: function (res) {
           if (res.errMsg === 'shareAppMessage:fail cancel') {
             console.log('fail', '放弃分享')
           } else if (res.errMsg === 'shareAppMessage:fail') {
             console.log('fail', '分享失败')
           }
         },
       }
     },
     // 生成海报
     sharePost() {
       const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
       store.dispatch('details/post', {
         pid: this.pid,
         sid: fromsid === 'undefined' ? 0 : fromsid,
       }).then((data) => {
         uni.hideLoading()
         this.$refs.uniPopupPost.open()
       })
     },
     // 参数选择弹窗开关
     showBottom(isCart) {
       this.isCart = isCart
       this.isShowBottom = true
     },
     closeBottom() {
       this.isShowBottom = false
     },
     // 前往购物车
     toCart() {
       uni.switchTab({
         url: '/pages/cart/cart',
         success: res => {},
         fail: (error) => { console.log('跳转购物车失败======>', error) },
         complete: () => { console.log('toCart') },
       })
     },
     // 加入购物车
-    addCart (mpId, num, checkedSKU, skId) {
+    addCart (mpId, num, checkedSKU, skId,price) {
-      this.addCartList.mp_id = mpId
+	  const addCartList = {}
-      this.addCartList.sk_id = skId
+      addCartList.mp_id = mpId
-      this.addCartList.num = num
+      addCartList.sk_id = skId
-      this.addCartList.checkedSKU = checkedSKU
+      addCartList.num = num
-      console.log('添加购物车的参数', this.addCartList)
+      addCartList.checkedSKU = checkedSKU
-      store.dispatch('cart/addCart', this.addCartList).then((res) => {
+      addCartList.pid = this.pid
+      addCartList.price = price
+      console.log('添加购物车的参数', addCartList)
+      store.dispatch('cart/addCart', addCartList).then((res) => {
         if (res.code === 1) {
           uni.showToast({
             title: '添加成功~',
             icon: 'success',
           })
         }
         // 再次请求购物车接口，实现实时更新
         store.dispatch('cart/getCartList', {
           uid: this.$store.state.user.userInfo.uid,
         })
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .container {
   background-color: #f8f8f8;
   font-family: "PingFangSC-Regular";
   // 板块样式
   > view {
     background: #ffffff;
     margin-bottom: 10px;
     padding: 8px 20px 8px 20px;
     box-sizing: border-box;
   }
   // 基础信息板块
   .basic_info {
     // 轮播图
     .swiperImage {
       width: 684rpx;
       height: 480rpx;
       image {
         max-width: 100%;
         max-height: 100%;
         border-radius: 16rpx;
       }
     }
     // 产品价格及购买人数
     .info_pay {
       color: #eb5d3b;
       font-size: 18px;
       margin-top: 5px;
       font-family: "PingFangSC-Semibold";
       display: flex;
       justify-content: space-between;
       .info_pay_discount {
         text-decoration: line-through;
         margin-left: 8rpx;
         color: #999;
         font-size: 14px;
       }
       .info_pay_number {
         color: #999;
         font-size: 14px;
         font-family: PingFangSC-Regular;
       }
     }
     // 产品名称
     .info_name {
       margin-top: 5px;
       display: flex;
       justify-content: space-between;
       .info_name_name {
         margin-right: 10px;
         font-size: 16px;
         font-family: "PingFangSC-Semibold";
         max-width: 592rpx;
       }
       .info_name_share {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         margin-top: 14rpx;
         > image {
           height: 40rpx;
           width: 40rpx;
         }
         > text {
           font-family: PingFangSC-Regular;
           font-size: 12px;
           color: #999;
           letter-spacing: -0.23px;
         }
       }
     }
     // 售后服务
     .info_after {
       font-size: 10px;
       color: #999;
       margin-top: 20rpx;
       > span {
         height: 14px;
         margin-right: 10px;
       }
     }
   }
   // 详细信息
   .detail_info {
     margin-bottom: 20rpx;
     .screen_bar {
       width: 670rpx;
       margin-top: 20rpx;
       margin-bottom: 24rpx;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       font-size: 14px;
       color: #333333;
       transition: all 0.2s;
     }
     .item_active {
       border-bottom: 4rpx solid #ff6b4a;
     }
     .screen_item {
       font-size: 32rpx;
       color: #333333;
       display: flex;
       transition: all 0.2s;
       // 规格参数
       .specification {
         margin-bottom: 4px;
         .spe_item {
           image {
             width: 50px;
             height: 25px;
             margin-right: 6px;
             vertical-align: middle;
           }
           span {
             margin-left: 24rpx;
           }
         }
       }
     }
     //
   }
   // 宝贝好评率
   .evaluate {
     .evaluate_title {
       font-size: 14px;
       color: #333333;
       display: flex;
       justify-content: space-between;
       .title_rate {
         margin-left: 10rpx;
       }
       .evaluate_star {
         width: 90px;
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
       view {
         font-size: 14px;
         color: #333333;
         font-weight: bold;
       }
     }
     .evaluate_tag {
       view {
         display: inline-block;
         margin-right: 20rpx;
         min-width: 180rpx;
         margin-top: 10px;
         height: 48rpx;
         background: #f2f2f2;
         border-radius: 2px;
         font-family: PingFangSC-Regular;
         font-size: 12px;
         color: #666666;
         letter-spacing: -0.23px;
         text-align: center;
         padding: 0 48rpx;
         line-height: 48rpx;
       }
     }
   }
   // 商品详情
   .more_info {
     .more_fixed1 {
       display: flex;
       justify-content: space-between;
       align-content: center;
       margin-bottom: 12px;
       view {
         font-size: 14px;
         color: #333333;
         font-weight: bold;
         font-family: "PingFangSC-Medium";
         line-height: 24px;
       }
       image {
         width: 240rpx;
         height: 3px;
         margin-top: 10px;
       }
     }
     .more_all {
       width: 100%;
       margin-top: 30rpx;
       margin-right: 30rpx;
       margin-bottom: 180rpx;
       font-family: "PingFangSC-Regular";
     }
   }
   // 菜单
   .menu {
     position: fixed;
     bottom: 0;
     height: 74px;
     width: 100%;
     background: #ffffff;
     padding: 20px 20px 8px 20px;
     font-family: "PingFangSC-Regular";
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-content: center;
     margin: 0;
     /* iphonex 等安全区设置，底部安全区适配 */
     /* #ifndef APP-NVUE */
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
     .menu_1 {
       width: 20%;
       height: 100%;
       text-align: center;
       color: #989898;
       .cart_icon {
         position: relative;
         text {
           position: absolute;
           color: white;
           font-size: 17px;
           background-color: red;
           min-height: 24px;
           min-width: 24px;
           line-height: 24px;
           right: -12%;
           top: -12px;
           text-align: center;
           border-radius: 24px;
           padding: 2px;
         }
       }
     }
     image {
       width: 42%;
       height: 26px;
     }
     .menu_image {
       font-size: 12px;
       text-align: center;
     }
     .menu_2 {
       width: 74%;
       height: 86%;
       display: grid;
       grid-template-columns: 50% 50%;
     }
     .menu_input {
       display: inline-flex;
       align-items: center;
       justify-content: space-around;
       background: #fff0ec;
       font-size: 16px;
       color: #ff6b4a;
       border-radius: 20px 0 0 20px;
     }
     .menu_now {
       display: inline-flex;
       align-items: center;
       justify-content: space-around;
       background: #ff6b4a;
       font-size: 16px;
       color: #ffffff;
       border-radius: 0 20px 20px 0;
     }
   }
 }
 </style>

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @36e5592

 <template>
   <view>
     <view
       class="card"
       v-if="current == status"
       @click="toOrderInfo(status,order.pay_id)"
     >
       <view class="cardHeader">
         <text
           class="orderId"
           v-if="status == '0'||status == '1'"
         >订单号：{{order.pay_id}}</text>
         <text
           class="orderId"
           v-if="status == '2'||status == '3'"
         >下单时间：{{order.pay_time}}</text>
         <text
           class="orderType"
           v-if="status=='0'"
         >待付款</text>
         <text
           class="orderType"
           v-if="status=='1'"
         >待收货</text>
         <text
           class="orderType"
           v-if="status == '2'||status == '3'"
         >已完成</text>
         <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
       </view>
       <view
         class="orderCardInfo"
-        v-for="(orderInfo, index) in order.order_info.list"
+        v-for="(orderInfo, index) in orderInfoList"
         :key="index"
       >
         <image
           :src="orderInfo.imgUrl"
           mode="aspectFill"
         ></image>
         <view class="infoText">
           <view class="orderName">{{orderInfo.p_name}}</view>
           <view class="orderDescrib">{{orderInfo.p_name}}</view>
           <view class="infoText-bottom">
             <view class="markPrice">{{orderInfo.nowPrice}}</view>
             <view class="buy-num">X {{orderInfo.num}}</view>
           </view>
         </view>
       </view>
       <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
       <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
       <view
         class="btns"
         v-if="status == '0'"
       >
         <view class="btn-type1">取消订单</view>
         <view class="btn-type2">去支付</view>
       </view>
       <view
         class="btns"
         v-if="status == '1'"
       >
         <view class="btn-type2">确认收货</view>
       </view>
       <view
         class="btns"
         v-if="status == '2'"
       >
         <view class="btn-type2">再次购买</view>
       </view>
       <!-- 	<view class="btns" v-if="status == '3'">
 				<view class="btn-type2">再次购买</view>
 			</view> -->
 		</view>
 		<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
 			<view class="cardHeader">
 				<text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
 				<text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
 				<text class="orderType" v-if="status=='0'">待付款</text>
 				<text class="orderType" v-if="status=='1'">待收货</text>
 				<text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
 				<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
 			</view>
-			<view class="orderCardInfo"  v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
+			<view class="orderCardInfo"  v-for="(orderInfo) in orderInfoList" :key="orderInfo">
 				<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
 				<view class="infoText">
 					<view class="orderName">{{orderInfo.p_name}}</view>
 					<view class="orderDescrib">{{orderInfo.p_name}}</view>
 					<view class="infoText-bottom">
 						<view class="markPrice">{{orderInfo.nowPrice}}</view>
 						<view class="buy-num">X {{orderInfo.num}}</view>
 					</view>
 				</view>
 			</view>
 			<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
 			<view class="btns" v-if="status == '0'">
 				<view class="btn-type1" >取消订单</view>
 				<view class="btn-type2">去支付</view>
 			</view>
 			<view class="btns" v-if="status == '1'">
 				<view class="btn-type2">确认收货</view>
 			</view>
 			<view class="btns" v-if="status == '2'||status == '3'">
 				<view class="btn-type2">再次购买</view>
 			</view>
 			<!-- <view class="btns" v-if="status == '3'">
 				<view class="btn-type2">再次购买</view>
 			</view> -->
     </view>
   </view>
 </template>
 <script>
 	export default {
 		props: {
 			/**
 			 * 订单数据
 			 */
-			order: {
+			order: {},
-				// orderId: Number,
-				// img: String,
-				// name: String,
-				// originCost:String,
-				// price: String,
-				// orderType:Number,
-				// buyNum:Number,
-				finished_time: null,
-				is_refound: String,
-				mch_id: String,
-				money_of_dcw: String,
-				money_of_partner: String,
-				money_of_shop: String,
-				orderJudge: Boolean,
-				order_info: {
-					address:{
-						cityName: String,
-						countyName: String,
-						detailInfo: String,
-						errMsg: String,
-						nationalCode: String,
-						postalCode: String,
-						provinceName: String,
-						telNumber: String,
-						userName: String,
-					},
-					cartinfo: ["127"],
-					keyname: "330_1588911391",
-					lefttime: Number,
-					list:[
-						{
-							cart_id: "127",
-							imgUrl: String,
-							img_index_url: null,
-							memo: String,
-							mp_id: String,
-							nowPrice: String,
-							num: String,
-							oldPrice: Number,
-							p_discount: String,
-							p_name: String,
-							p_root_index: String,
-							p_sale_price: String,
-							peopleName: String,
-							pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
-							pid: String,
-							sk_id: String,
-						}
-					],
-					orderDesc: String,
-					total_fee: Number,
-				},
-				partner_uid: String,
-				pay_cate: String,
-				pay_id: String,
-				pay_time: String,
-				pay_wood_desc: String,
-				pay_wood_id: String,
-				prepay_id: String,
-				re_check_staus: String,
-				shopid: String,
-				split_userid: String,
-				status: String,
-				// status0待付款  1已付款 待收货 2 已收货待评价 3 已评价
-				total_fee: String,
-				uid: String,
-			},
 			/**
 			 * 当前选择
 			 */
 			current:Number
 		},
 		created() {
 			console.log(this.order);
 			// console.log(this.order.status );
 			// console.log(this.current);
 		},
 		computed:{
 			status(){
 				return this.order.status
 			},
 			orderInfoList(){
-				console.log('this.order.order_info', this.order)
+				console.log('orderInfoList', this.order.order_info)
 				return this.order.order_info
 			}
 		},
 		data() {
 			return {
 			};
 		},
 		methods:{
 			toRefundment(){
 				uni.navigateTo({
 					url: '../refundment/refundment',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toOrderInfo(status,payId){
 				console.log(status,payId)
 				switch(status){
 					// 0待付款  1待收货  2已收货 3 已评价
 					case '0':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
 					case '1':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
 					case '2 || 3':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
 					default:
 					break;
 				}
 			}
 		}
 	}
 </script>
 <style lang="scss">
 .card {
   width: 670rpx;
   height: 478rpx;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
   border-radius: 8px;
   border-radius: 8px;
   margin-top: 20rpx;
   padding: 40rpx;
   box-sizing: border-box;
   .cardHeader {
     width: 100%;
     height: 40rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .orderId {
       font-size: 12px;
       color: #999999;
     }
     .orderType {
       font-size: 14px;
       color: #ff6b4a;
     }
   }
   .orderCardInfo {
     width: 100%;
     height: 188rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin-top: 40rpx;
     image {
       height: 188rpx;
       width: 188rpx;
       margin-right: 24rpx;
     }
     .infoText {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
       height: 188rpx;
       width: 368rpx;
     }
     .orderName {
       font-size: 14px;
       color: #333333;
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
     .orderDescrib {
       font-size: 12px;
       color: #999999;
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
     .infoText-bottom {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
       width: 100%;
       .markPrice {
         font-size: 14px;
         color: #ff6b4a;
         margin-right: 20rpx;
       }
       .buy-num {
         font-size: 12px;
         color: #999999;
       }
     }
   }
   .payPrice {
     text-align: right;
     margin: 20rpx 0;
     font-size: 14px;
     color: #333333;
     .priceNum {
       font-size: 14px;
       color: #ff6b4a;
     }
   }
   .btns {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     .btn-type1 {
       height: 48rpx;
       width: 156rpx;
       border: 1px solid #ff6b4a;
       border-radius: 12px;
       border-radius: 12px;
       text-align: center;
       line-height: 48rpx;
       font-size: 12px;
       color: #ff6b4a;
     }
     .btn-type2 {
       height: 48rpx;
       width: 140rpx;
       background: #ff6b4a;
       border-radius: 12px;
       border-radius: 12px;
       text-align: center;
       line-height: 48rpx;
       font-size: 12px;
       color: #ffffff;
       margin-left: 20rpx;
     }
   }
 }
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @36e5592

 <!-- 订单待付款  待收货 -->
 <template>
   <view class="content">
     <!-- 待付款 -->
     <view
       class="order-time"
       v-if="status == '0'"
     >
       <text>请在</text>
       <uni-countdown
         color="#EC5D3B"
         splitor-color="#EC5D3B"
         :show-day="false"
         :hour="0"
         :second="getTime"
         @timeup=timeup
       ></uni-countdown>
       <text>内完成付款</text>
     </view>
     <!-- 待收货 -->
     <view
       class="headerBanner"
       v-if="status == '1'"
     >
       <view class="bannerLeft">
         <view class="T1">卖家已发货</view>
         <view class="T2">还剩 确认收货</view>
       </view>
       <image
         src="../../static/car.png"
         mode="aspectFill"
       ></image>
     </view>
     <view class="order">
       <view class="order-user">
         <view class="order-user-head">
           <text class="p1">{{orderAddressInfo.userName}}</text>
           <text class="p2">{{orderAddressInfo.telNumber}}</text>
         </view>
         <view class="order-user-body">
           <image src="../../static/myorder-paying-location.png"></image>
           <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
         </view>
       </view>
       <view class="order-info">
         <view
           class="order-info-head"
           v-for="(orderInfoListItem,index) in orderInfoList"
           :key="index"
         >
           <image
             :src="orderInfoListItem.imgUrl"
             mode="aspectFill"
           ></image>
           <view class="order-info-head-r">
             <text class="p1">{{orderInfoListItem.p_name}}</text>
             <view
               class="p2"
               style="margin: 0;"
             >
               规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
               <!-- <view class="arrow"></view> -->
             </view>
             <view class="infoText-bottom">
               <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
               <view class="buy-num">X {{orderInfoListItem.num}}</view>
             </view>
           </view>
         </view>
         <!-- <view class="order-info-goodsnum">
             <text>X1</text>
         </view> -->
         <text class="order-info-freight">
           <text class="p1">运费</text>
           <text class="p2">免运费</text>
         </text>
         <text class="order-info-discount">
           <text class="p1">优惠</text>
           <text class="p2">-￥{{totalDiscount}}</text>
         </text>
         <text class="order-info-price">
           <text class="p1">实付</text>
           <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
         </text>
         <text class="order-info-num">
           <text>订单号：{{payId}}</text>
         </text>
         <text class="order-info-time">
           <text>下单时间：{{orderInfo.order_info.pay_time | timerChange}}</text>
         </text>
         <view class="order-info-hr"></view>
         <view class="order-info-contact">
           <image src="../../static/myorder-paying-contact.png"></image>
           <text>联系客服</text>
         </view>
       </view>
     </view>
     <view
       class="order-confim"
       v-if="status == '0'"
     >
       <button
         class="b1"
         @click="cancleOrder"
       >取消订单</button>
       <button
         class="b2"
         @click="paylog"
       >立即支付</button>
     </view>
     <view
       class="order-confim"
       v-if="status == '1'"
     >
       <!-- <button class="b1">取消订单</button> -->
       <button
         class="b2"
         @click="confirmOrder"
       >确认收货</button>
     </view>
   </view>
 </template>
 <script>
 import store from "@/store";
 import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
 export default {
   components: {
     UniCountdown
   },
   data() {
     return {
       payId: "",
       payTime: "",
       status: "", // status 0 待付款 1 已发货
       uid: "",
       openid: "",
       lefttime: 0,
-      isPay: 0
+      isPay: 0,
+	  orderInfo:Object
     };
   },
-  onLoad: function ({payId,state,isPay}) {
+  onLoad:async function ({payId,status,isPay}) {
-    console.log('++++++++++++++++++',payId,state,isPay)
+    // console.log('++++++++++++++++++',payId,status,isPay)
     this.payId = payId
-    this.status = state
+    this.status = status
     this.isPay = isPay
     const openid = uni.getStorageSync('openid')
-    const uid = this.$store.state.user.uid
+    const uid = this.$store.state.user.userInfo.uid
     this.uid = uid
     this.openid = openid
-    store.dispatch('orderRead/getOrderInfo', {
+    await store.dispatch('orderRead/getOrderInfo', {
       pay_id: this.payId,
-      uid: "1",
+      uid: uid,
       openid: openid
     });
-    // this.orderInfo = this.$store.state.orderRead.orderInfo
+	console.log(this.$store.state.orderRead.orderInfo)
+    this.orderInfo = this.$store.state.orderRead.orderInfo
   },
   // 若从支付页面跳转过来，返回直接返回到首页
   onBackPress(option) {
     if (option.from === "backbutton" && this.isPay) {
       uni.switchTab({
         url: "/pages/index/index"
       });
       return true; // 阻止默认返回行为
     }
   },
   computed: {
-    // 获取订单详细信息
-    orderInfo() {
-      console.log("orderInfo", this.$store.state.orderRead.orderInfo);
-      return this.$store.state.orderRead.orderInfo || {};
-    },
     orderInfoList () {
-      const orderInfoList = this.$store.state.orderRead.orderInfo.order_info.list
+      return this.orderInfo.order_info.list
-      return orderInfoList
     },
     // 获取订单地址信息
     orderAddressInfo () {
       return this.orderInfo.order_info.address
     },
     // 订单付款时间
     getTime () {
       return this.orderInfo.order_info.lefttime
     },
     // 计算总优惠额
     totalDiscount() {
       const discountInfoList = this.orderInfo.discount_info;
       let totalDiscount = 0;
       if (discountInfoList) {
         discountInfoList.map((discountItem, index) => {
           totalDiscount += Number(discountItem.value);
         });
       }
       // console.log(totalDiscount)
       return totalDiscount;
     }
   },
   methods: {
     // 取消订单
     timeup() {
       this.cancleOrder();
     },
     cancleOrder() {
       const uid = this.uid;
       const openid = this.openid;
+	  const keyname = this.orderInfo.keyname
+	  console.log(this.orderInfo)
       uni.showModal({
         title: "提示",
         content: "现在取消，订单不可恢复哦，确认取消吗？",
         success: function(res) {
           if (res.confirm) {
             store.dispatch("cancelOrder/cancel", {
-              keyname: "1",
+              keyname: keyname,
               uid: uid,
               openid: openid
             });
+			uni.navigateBack({
+				delta:1
+			})
           } else if (res.cancel) {
             console.log("用户点击取消");
           }
         }
       });
     },
-    paylog() {},
+    paylog() {
-    confirmOrder() {
+		console.log('pay',this.orderInfo)
+		//   const { data, exKeyName: keyName } = res
+		//   const uid = uni.getStorageSync('uid')
+		//   const timeStamp = new Date().getTime().toString()
+		//   const nonceStr = 'asfafasfasfasfasf'
+		//   // 支付参数
+		//   const fieldSet = {
+		//     openid: this.$store.state.user.userInfo.openid,
+		//     uid: this.$store.state.user.userInfo.uid,
+		//     shopid: 0,
+		//     payCate: 2020,
+		//     payMoney: this.totalPrice,
+		//     payWoodId: `fcdj-${uid}-${keyName}`,
+		//     payWoodDesc: '在【非常戴镜】的微信付款凭证',
+		//     nonceStr,
+		//     signType: 'MD5',
+		//     app_uid: 2020,
+		//     timeStamp,
+		//     keyname: keyName,
+		//     billInfo: JSON.stringify(data),
+		//   }
+		//   // 请求后台支付接口
+		//   store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
+		//     if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
+		//       const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
+		//       const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
+		//       // 微信支付接口
+		//       uni.requestPayment({
+		//         appId: data.appid,
+		//         timeStamp,
+		//         nonceStr,
+		//         total_fee: this.totalPrice,
+		//         package: `prepay_id=${data.prepay_id}`,
+		//         signType: 'MD5',
+		//         paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
+		//         success: (res) => {
+		//           // 支付成功
+		//           uni.showModal({
+		//             content: '支付成功',
+		//             showCancel: false,
+		//           })
+		//           // 跳转订单详情页->状态 待收货
+		//           uni.reLaunch({
+		//             url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
+		//           })
+		//         },
+		//         fail: (res) => {
+		//           // 支付失败
+		//           uni.showModal({
+		//             content: '支付失败',
+		//             showCancel: false,
+		//           })
+		//           // 跳转订单详情页->状态 待付款
+		//           uni.reLaunch({
+		//             url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
+		//           })
+		//         },
+		//         complete: () => {
+		//           uni.hideLoading()
+		//         },
+		//       })
+		//     } else {
+		//       uni.showModal({
+		//         content: '支付失败',
+		//         showCancel: false,
+		//       })
+		//       console.log('支付失败')
+		//       uni.hideLoading()
+		//     }
+		//   })
+		//修改订单状态 待付款==>待收货
+		store.dispatch("statusConfirm/confirm", {
+		    uid: this.uid,
+		    openid: this.openid,
+		    oldway: "0",
+		    way: "1",
+		    pay_id: this.payId,
+		    judgeContent: "",
+		    orderInfo: this.orderInfo.order_info
+		  })
+		  .then(
+		    setTimeout(() => {
+		      uni.navigateBack();
+		    }, 1500)
+		  );
+	},
+    confirmOrder() {
+		//确认收货 way1 ==>way2
       store
         .dispatch("statusConfirm/confirm", {
           uid: this.uid,
           openid: this.openid,
           oldway: "1",
           way: "2",
           pay_id: this.payId,
           judgeContent: "",
           orderInfo: this.orderInfo.order_info
         })
         .then(
           setTimeout(() => {
             uni.navigateBack();
           }, 1500)
         );
     }
   },
   filters: {
     timerChange: function(value) {
       var newDate = new Date();
       newDate.setTime(value * 1000);
       return newDate.toLocaleString();
     }
   }
 };
 </script>
 <style lang="scss" scoped>
 .content {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   background-color: #f2f2f2;
 }
 .order {
   margin-bottom: 112rpx;
   background: #f2f2f2;
   margin-top: 140rpx;
   width: 670rpx;
 }
 .order-time {
   width: 100%;
   height: 140rpx;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   text {
     // font-family: PingFangSC-Regular;
     // margin-top: 48rpx;
     font-size: 14px;
     color: #333333;
     letter-spacing: -0.26px;
   }
   .p2 {
     // font-family: DINAlternate-Bold;
     margin: 42rpx 20rpx 0 20rpx;
     font-size: 18px;
     color: #ec5d3b;
     letter-spacing: -0.34px;
   }
 }
 .headerBanner {
   width: 100%;
   height: 140rpx;
   background: #4a90e2;
   padding: 26rpx 60rpx 24rpx 60rpx;
   box-sizing: border-box;
   color: #ffffff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   .bannerLeft {
     font-size: 36rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .T2 {
       font-size: 24rpx;
     }
   }
   image {
     height: 56rpx;
     width: 72rpx;
   }
 }
 .order-user {
   height: 228rpx;
   background: #ffffff;
   border-radius: 14rpx;
   margin: 0 auto;
   margin-top: 20rpx;
   margin-bottom: 20rpx;
   .order-user-head {
     display: flex;
     height: 108rpx;
     align-items: center;
     margin-left: 126rpx;
     .p1 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       margin-right: 20rpx;
     }
     .p2 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #999999;
       letter-spacing: -0.26px;
     }
   }
   .order-user-body {
     display: flex;
     width: 100%;
     image {
       width: 24px;
       height: 26px;
       margin: 12rpx 32rpx 0 40rpx;
     }
     .p3 {
       // font-family: PingFangSC-Semibold;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
     }
   }
 }
 .order-info {
   background-color: #fff;
   box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
   border-radius: 16rpx;
   margin: 0 auto;
   view {
     margin-left: 40rpx;
   }
   text {
     font-size: 14px;
   }
   .order-info-head {
     display: flex;
     padding-top: 40rpx;
     image {
       height: 188rpx;
       width: 188rpx;
     }
     .order-info-head-r {
       margin: 0;
       width: 368rpx;
       margin-left: 24rpx;
       // margin-top: 40rpx;
       text {
         display: block;
       }
       // .arrow{
       // width: 0;
       // height: 0;
       // border-left: 5px transparent;
       // border-right: 5px transparent;
       // border-top: 5px #979797;
       // border-bottom: 0 transparent;
       // border-style: solid;
       // position: relative;
       // // transform: scaleY(-1);
       // }
       // .arrow::after{
       //     content: '';
       //     position: absolute;
       //     top: -6.5px;
       //     left: -5px;
       //     border-left: 5px transparent;
       //     border-right: 5px transparent;
       //     border-top: 5px #FFFFFF;
       //     border-bottom: 0 transparent;
       //     border-style: solid;
       // }
       .p1 {
         min-height: 40px;
         // font-family: PingFangSC-Regular;
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
         line-height: 18px;
         // line-height: 20px;
       }
       .p2 {
         height: 34px;
         padding: 1px 0 3px 0;
         // font-family: PingFangSC-Regular;
         font-size: 12px;
         color: #999999;
         letter-spacing: -0.23px;
       }
       .infoText-bottom {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
         width: 100%;
         margin-left: 0;
         .markPrice {
           font-size: 14px;
           color: #ff6b4a;
           margin-right: 20rpx;
           margin-left: 0rpx;
         }
         .buy-num {
           font-size: 12px;
           color: #999999;
         }
       }
     }
   }
   // .order-info-goodsnum {
   //     display: flex;
   //     align-items: center;
   //     justify-content: flex-end;
   //     text {
   //         margin-right: 44rpx;
   //         // ont-family: PingFangSC-Regular;
   //         font-size: 12px;
   //         color: #999999;
   //         letter-spacing: -0.23px;
   //     }
   // }
   .order-info-freight {
     display: block;
     margin-left: 40rpx;
     margin-top: 22rpx;
     .p1 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       line-height: 18px;
       margin-right: 24px;
     }
     .p2 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #ff6b4a;
       letter-spacing: -0.26px;
     }
   }
   .order-info-discount {
     display: block;
     margin-left: 40rpx;
     margin-top: 24rpx;
     .p1 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       line-height: 18px;
       margin-right: 24px;
     }
     .p2 {
       // font-family: PingFangSC-Regular;
       font-size: 14px;
       color: #ff6b4a;
       letter-spacing: -0.26px;
     }
   }
   .order-info-price {
     display: block;
     margin-left: 40rpx;
     margin-top: 24rpx;
     .p1 {
       // font-family: PingFangSC-Semibold;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       line-height: 18px;
       margin-right: 24px;
     }
     .p2 {
       // font-family: PingFangSC-Semibold;
       font-size: 14px;
       color: #ff6b4a;
       letter-spacing: -0.26px;
     }
   }
   .order-info-num {
     display: block;
     margin-left: 40rpx;
     margin-top: 44rpx;
     text {
       // font-family: PingFangSC-Regular;
       font-size: 12px;
       color: #999999;
       letter-spacing: -0.23px;
     }
   }
   .order-info-time {
     display: block;
     margin: 8rpx 0 48rpx 40rpx;
     text {
       // font-family: PingFangSC-Regular;
       font-size: 12px;
       color: #999999;
       letter-spacing: -0.23px;
     }
   }
   .order-info-hr {
     width: 520rpx;
     height: 1px;
     background-color: #e9e9e9;
     margin-bottom: 20rpx;
   }
   .order-info-contact {
     display: flex;
     padding-bottom: 28rpx;
     image {
       width: 19px;
       height: 16px;
     }
     text {
       // font-family: PingFangSC-Regular;
       margin-left: 20rpx;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       line-height: 18px;
     }
   }
 }
 .order-confim {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   // z-index: 999;
   width: 100%;
   height: 112rpx;
   position: fixed;
   bottom: 0;
   background: #ffffff;
   button {
     width: 204rpx;
     height: 80rpx;
     border: 1px solid #ff6b4a;
     border-radius: 40rpx;
     font-size: 32rpx;
     letter-spacing: -0.3px;
     margin-right: 0;
   }
   .b1 {
     // font-family: PingFangSC-Regular;
     color: #ff6b4a;
     background-color: #ffffff;
   }
   .b2 {
     // font-family: PingFangSC-Regular;
     background-color: #ff6b4a;

src/store/modules/orderRead.js

Diff comments View file @36e5592

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const {	4	const {
5	orderRead	5	orderRead
6	} = urlAlias	6	} = urlAlias
7		7
8	const state = {	8	const state = {
9	orderInfo: {}	9	orderInfo: {}
10	}	10	}
11		11
12	const mutations = {	12	const mutations = {
13	INIT: (state, orderInfo) => {	13	INIT: (state, orderInfo) => {
14	state.orderInfo = orderInfo	14	state.orderInfo = orderInfo
15	}	15	}
16	}	16	}
17		17
18	const actions = {	18	const actions = {
19	getOrderInfo({ commit }, param) {	19	getOrderInfo({ commit }, param) {
20	request({	20	return new Promise ((resolve) => request({
21	url: orderRead,	21	url: orderRead,
22	data: param,	22	data: param,
23	success: (res) => {	23	success: (res) => {
24	commit("INIT", res.data.data)	24	commit("INIT", res.data.data)
25	console.log('res',res)	25	resolve(res.data.data)
26	}	26	}
27	})	27	}))
28	}	28	}
29	}	29	}
30		30
31	export default {	31	export default {
32	namespaced: true,	32	namespaced: true,
33	state,	33	state,
34	mutations,	34	mutations,
35	actions	35	actions
36	}	36	}
37		37