From 1b4b4938a06f42ff5d1d7fab5cb2aac6d0f26d87 Mon Sep 17 00:00:00 2001 From: "Adam.Gong" <admin@xiuyetang.com> Date: Tue, 20 Sep 2022 20:43:35 +0800 Subject: [PATCH] auto commit the code by alias command --- src/components/BottomSheet/BottomSheet.vue | 2379 +++++++++++++++------------- src/pages/address/addAddress.vue | 506 +++--- src/pages/address/addressList.vue | 11 +- src/pages/cart/cart.vue | 1070 ++++++------- src/pages/confirmOrder/confirmOrder.vue | 1620 +++++++++---------- src/pages/details/components/Introduce.vue | 76 +- src/pages/details/details.vue | 15 +- src/pages/myOrder/components/OrderCard.vue | 738 ++++----- src/pages/myOrder/myOrder.vue | 312 ++-- src/pages/user/user.vue | 8 +- src/store/modules/address.js | 5 +- src/store/modules/cart.js | 4 +- src/store/modules/details.js | 430 +++-- src/store/modules/myLoveList.js | 8 +- src/store/modules/myOrder.js | 212 +-- src/store/url.js | 45 +- 16 files changed, 3817 insertions(+), 3622 deletions(-) diff --git a/src/components/BottomSheet/BottomSheet.vue b/src/components/BottomSheet/BottomSheet.vue index c3e818c..9c5b849 100644 --- a/src/components/BottomSheet/BottomSheet.vue +++ b/src/components/BottomSheet/BottomSheet.vue @@ -1,907 +1,940 @@ <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="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">左 (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">右 (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">左 (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">右 (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">左 (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">右 (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">年 (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">月 (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">日 (D)</text> - <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> - <view class="p14" style="width: 30px;"> - {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} - <image src="../../static/detail-tabicon.png" ></image> - </view> - </picker> - </view> - </view> - <view class="ipts"> - <view class="inputItem"> - <text class="text">镜片宽度</text> - <input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/> - </view> - <view class="inputItem"> - <text class="text">鼻梁宽度</text> - <input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/> - </view> - <view class="inputItem"> - <text class="text">镜腿长度</text> - <input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/> - </view> - - </view> - <!-- <view class="confirm"> + <view class="goodInfo"> + <view class="imageWrap"> + <!-- <image :src="skuItem.sku_pic_http" mode="aspectFill" style="width: 188rpx;height: 168rpx;"> + </image> --> + + </view> + <view class="infoRight"> + <!-- <text class="goodName">{{goodInfo.shop_wood_name}}-{{skuItem.wsp_sku_name}}</text> --> + <text class="goodName">{{goodInfo.shop_wood_name}}</text> + <text class="remarks">支持7天无理由退货 顺丰发货</text> + <view class="priceBox"> + <!-- <view class="price">¥{{skuItem.wsp_wood_price || '暂无'}}</view> --> + <view class="price">¥{{0 || '暂无'}}</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">左 (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">右 (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">左 (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">右 (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">左 (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">右 (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">年 (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">月 (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">日 (D)</text> + <picker @change="bindPickerChange43" + :value="pickerInfoList[3].nameIndex3" + :range="pickerInfoList[3].nameArray3"> + <view class="p14" style="width: 30px;"> + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} + <image src="../../static/detail-tabicon.png"></image> + </view> + </picker> + </view> + </view> + <view class="ipts"> + <view class="inputItem"> + <text class="text">镜片宽度</text> + <input class="input" @input="glassInfoInput($event,0)" type="text" + :value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''" + placeholder="请输入镜片宽度" /> + </view> + <view class="inputItem"> + <text class="text">鼻梁宽度</text> + <input class="input" @input="glassInfoInput($event,1)" type="text" + :value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''" + placeholder="请输入鼻梁宽度" /> + </view> + <view class="inputItem"> + <text class="text">镜腿长度</text> + <input class="input" @input="glassInfoInput($event,2)" type="text" + :value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''" + placeholder="请输入镜腿长度" /> + </view> + + </view> + <!-- <view class="confirm"> <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> <text>确认以上输入信息来源于我的验光数据!</text> </view> --> - </view> - </template> - <template v-else> - <view - v-for="item in pickerInfoList" - :key="item.key" - class="bodyBox" - > - <template v-if="item.nameC==='验光日期'"> - <text class="names">{{item.nameC}}</text> - <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> - <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> - <text>{{item.nameArray3[item.nameIndex2]}}日</text> - </template> - <template v-else> - <template v-if="item.nameC==='度数'"> - <text style="display: inline;">*</text> - </template> - - <text class="names">{{item.nameC}}</text> - <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> - <text>右 {{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> + </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;">左 {{item.nameArray1[item.nameIndex1]}}</text> + <text>右 {{item.nameArray2[item.nameIndex2]}}</text> + </template> + </view> + </template> </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> + </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' + 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 + isShowBottom: Boolean, + shop_wood_id: String, + wsp_id: String, + propMpId: String, + goodInfo: Object, + isCart: Number, + cart_id: String, + index: Number }, data() { - return { - loveCurrent:Number, - count: 1, - // pid: 0, - maxCount: 20, - dataName: '', // 验光数据人员名称 - isDataName: false, // 是否是已存在的人员数据 - dataConfirm: false, // 已确认所输入验光数据 - opIsOpen: true, - addDisabled: false, - desDisabled: false, - current: [], - show: [true,true], - checkedData: {}, - // 度数相关数据 - pickerInfoList: [ - { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, - { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, - { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, - { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, - ], - // confirm: false, // 用户是否确认 - // tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], - name: '', - oldname: '', // 用于判读用户是否改变名字 - pickerInfoChioce: { - leftSph: '', - rightSph: '', - leftCyl: '', - rightCyl: '', - leftAxi: '', - rightAxi: '', - time: { - year: 0, - month: 0, - day: 0, - }, - }, - glassInfo:{ - glassWidth:Number,//镜片宽度 - norseWidth:Number,//鼻宽 - legWidth:Number//镜腿长度 - }, - pd: '', // 瞳距 - oldpd: '', // 用于判断用户是否改变瞳距 - kinds: 1, // kinds=1,提交为新增验光,2为修改 - mp_id: Number, - skuValueArray:[], - skId:String - } + return { + loveCurrent: Number, + count: 1, + // pid: 0, + maxCount: 20, + dataName: '', // 验光数据人员名称 + isDataName: false, // 是否是已存在的人员数据 + dataConfirm: false, // 已确认所输入验光数据 + opIsOpen: true, + addDisabled: false, + desDisabled: false, + current: [], + show: [true, true], + checkedData: {}, + // 度数相关数据 + pickerInfoList: [{ + nameC: '度数', + nameE: '(SPH)', + nameArray1: [''], + nameIndex1: 0, + nameArray2: [''], + nameIndex2: 0, + key: 0 + }, + { + nameC: '散光', + nameE: '(CYL)', + nameArray1: [''], + nameIndex1: 0, + nameArray2: [''], + nameIndex2: 0, + key: 1 + }, + { + nameC: '散光轴位', + nameE: '(AXI)', + nameArray1: [''], + nameIndex1: 0, + nameArray2: [''], + nameIndex2: 0, + key: 2 + }, + { + nameC: '验光日期', + nameE: '', + nameArray1: [''], + nameIndex1: 0, + nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], + nameIndex2: 0, + nameArray3: [''], + nameIndex3: 0 + }, + ], + // confirm: false, // 用户是否确认 + // tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], + name: '', + oldname: '', // 用于判读用户是否改变名字 + pickerInfoChioce: { + leftSph: '', + rightSph: '', + leftCyl: '', + rightCyl: '', + leftAxi: '', + rightAxi: '', + time: { + year: 0, + month: 0, + day: 0, + }, + }, + glassInfo: { + glassWidth: Number, //镜片宽度 + norseWidth: Number, //鼻宽 + legWidth: Number //镜腿长度 + }, + pd: '', // 瞳距 + oldpd: '', // 用于判断用户是否改变瞳距 + kinds: 1, // kinds=1,提交为新增验光,2为修改 + mp_id: Number, + skuValueArray: [], + skId: String + } }, computed: { //进购物车选择的人的index - p_current(){ - const getLoveItemIndex = (item) => item.mp_id == this.propMpId - const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex ) - if(this.isCart == 3){ - this.loveCurrent = p_current - } - return p_current + 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 + arr_current() { + if (this.isCart == 3) { + const skId = this.wsp_id + const skuValue = this.skuItem.wsp_sku_name const skuValueArray = skuValue.split('_') this.skuValueArray = skuValueArray const attrList = this.$store.state.read.goodInfo.attrList - for (let i = 0;i<attrList.length;i++) { + 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 ) + const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex) // console.log('arr_current',arr_current) - this.current.push(arr_current) + this.current.push(arr_current) } - }else{ + } else { return null } }, loveList() { return this.$store.state.myLoveList.loveList || [] }, - attrList() { - // console.log('attrList',this.$store.state.read.goodInfo.attrList) - let attrList = this.$store.state.read.goodInfo.attrList - if(attrList !== undefined){ - return attrList - }else{ - return [] - } - }, - skuList() { - // console.log('skuList',this.$store.state.read.goodInfo.skuList) - return this.$store.state.read.goodInfo.skuList - }, - skuItem(){ - // if(this.isCart == 3){ - const skuList = this.$store.state.read.goodInfo.skuList - const skuItem = skuList.filter(item => item.sk_id === this.skId)[0] - return skuItem - // }else{ - // const skuList = this.$store.state.read.goodInfo.skuList - // const skuItem = skuList[0] - // return skuItem - // } - }, - mpList() { - - return this.$store.state.myLoveList.loveList - }, - glassInfoRight(){ - const glassInfoArr = Object.values(this.glassInfo) - // console.log('glassInfoArr',glassInfoArr.find(item => item == '0')) - return glassInfoArr.find(item => item == '0') ==undefined - } + 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.sku + }, + skuItem() { + // if(this.isCart == 3){ + const skuList = this.$store.state.read.goodInfo.sku + // console.log('skuItemskuItemskuItemskuItemskuItem', this.$store.state.read.goodInfo); + const skuItem = skuList.filter(item => item.wsp_id === this.skId)[0] + return skuItem + // }else{ + // const skuList = this.$store.state.read.goodInfo.skuList + // const skuItem = skuList[0] + // return skuItem + // } + }, + mpList() { + + return this.$store.state.myLoveList.loveList + }, + glassInfoRight() { + const glassInfoArr = Object.values(this.glassInfo) + // console.log('glassInfoArr',glassInfoArr.find(item => item == '0')) + return glassInfoArr.find(item => item == '0') == undefined + } }, created() { - this.skuValueArray = this.skuList[0].sku_value.split("_") - // console.log(this.sk_id) + this.skuValueArray = this.skuList[0].wsp_sku_name.split("_") + // console.log(this.wsp_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) + const pid = this.shop_wood_id + if (this.isCart !== 3) { + this.skId = this.skuList[0].wsp_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.wsp_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) } - 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", + name: "bottomSheet", methods: { //判断眼镜数据是否为0 - checkGlassInfo(){ + checkGlassInfo() { // const glassInfoArr = Object.values(this.glassInfo) // console.log(this.glassInfoRight) - if(!this.glassInfoRight){ + if (!this.glassInfoRight) { uni.showToast({ - title:'请完善镜框数据~', - icon:'none' + title: '请完善镜框数据~', + icon: 'none' }) } }, - updateMylove(){ + updateMylove() { const loveItem = this.loveList[this.loveCurrent] const glassWidth = this.glassInfo.glassWidth const norseWidth = this.glassInfo.norseWidth const legWidth = this.glassInfo.legWidth - if(loveItem.glassWidth !== glassWidth){ + if (loveItem.glassWidth !== glassWidth) { store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: 'glassWidth', keyvalue: glassWidth - }); + }); } - if(loveItem.norseWidth !== norseWidth){ + if (loveItem.norseWidth !== norseWidth) { store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: 'norseWidth', keyvalue: norseWidth - }); + }); } - if(loveItem.legWidth !== legWidth){ + if (loveItem.legWidth !== legWidth) { store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: 'legWidth', keyvalue: legWidth - }); + }); } }, - glassInfoInput(e,type){ - switch(type){ + glassInfoInput(e, type) { + console.log('glassInfoInput', e); + switch (type) { case 0: this.glassInfo.glassWidth = e.detail.value - break; + break; case 1: this.glassInfo.norseWidth = e.detail.value - break; + break; case 2: this.glassInfo.legWidth = e.detail.value - break; + break; default: - break; + break; } }, //参数点击事件==》改变对应图片 - cartOnClickItem(index, i,aid) { + 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 + const wsp_sku_name = this.skuValueArray.join('_') + //根据wsp_sku_name获取对应的wsp_id + const itemSk_id = this.skuList.filter(item => item.wsp_sku_name == wsp_sku_name)[0].wsp_id + //修改wsp_id this.skId = itemSk_id - if (this.current[index] !== i) { - this.current[index] = i - } - this.$forceUpdate() + if (this.current[index] !== i) { + this.current[index] = i + } + this.$forceUpdate() }, - comfirmChoose(){ + comfirmChoose() { this.checkGlassInfo() - if(this.glassInfoRight){ + if (this.glassInfoRight) { this.updateMylove() - const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price - this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车 + const price = this.skuList.filter(item => item.wsp_id == this.skId)[0].real_price + this.$emit("chooseCartModi", this.mp_id, this.skId, price, this.shop_wood_id, this.count, this.cart_id, + this.index) //添加购物车 this.$emit("closeBottom") } }, - addCart(){ + addCart() { this.checkGlassInfo() - if(this.glassInfoRight){ + if (this.glassInfoRight) { this.updateMylove() const that = this - const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name] + console.log('that.goodInfo.attrList------------>', that.goodInfo); + const checkedSKUName = '1111' 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) + // 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 = 11 + // let wsp_id = this.sku[j].wsp_id + // console.log('选择的商品wsp_id',wsp_id,'选择的商品参数',checkedSKU) // console.log('mp_id',this.mp_id,'数量',this.count) - this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车 - this.$emit("closeBottom")//关闭弹窗 + this.$emit("addCart", this.mp_id, this.count, checkedSKU, this.wsp_id, price) //添加购物车 + this.$emit("closeBottom") //关闭弹窗 } }, - onClickLoveItem(index,name){ + onClickLoveItem(index, name) { const loveList = this.loveList this.glassInfo.glassWidth = loveList[index].glassWidth this.glassInfo.norseWidth = loveList[index].norseWidth this.glassInfo.legWidth = loveList[index].legWidth for (let index = 0; index < loveList.length; index++) { - if (name === loveList[index].name && name!==this.name) { - this.isDataName = true - this.kinds = 2 - this.name = loveList[index].name - this.pd = loveList[index].pd - this.mp_id = loveList[index].mp_id - this.oldname = loveList[index].name - this.oldpd = loveList[index].pd - this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) - this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) - this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) - this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) - this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) - this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) - this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) - if (loveList[index].in_time.toString().slice(5, 6) === 0) { - this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) - } else { - this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) - } - if (loveList[index].in_time.toString().slice(8, 9) === 0) { - this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) - } else { - this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) - } - } + 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; + this.name = name; + this.loveCurrent = index; }, - closeSheet(){ + closeSheet() { this.$emit('closeBottom'); }, - stopEvent(){ //@click.stop防止事件冒泡 - + stopEvent() { //@click.stop防止事件冒泡 + }, - moveHandle(){ //不让页面滚动 - + 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 - } - }, - }) - } - } + console.log('handleInputhandleInputhandleInput', 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 = '' - } + // 只能输入正浮点数或正数 + console.log('handleInputPdhandleInputPd', 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] + 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] + 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] + 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] + 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] + 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] + 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] + 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] + 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] + 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() + 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-- - } + if (isadd) { + this.count >= this.maxCount ? this.addDisabled = true : this.count++ + } else { + this.count <= 1 ? this.desDisabled = true : this.count-- + } }, toComfirmOrder() { this.checkGlassInfo() this.updateMylove() - // 先处理验光部分的逻辑,如果ok在跳转 - let flag = 0 - if (this.name === '') { - uni.showToast({ - title: '请输入验光单取名', - icon: 'none', - duration: 2000, - }) - } else { - if (this.pd === '') { - uni.showToast({ - title: '请输入瞳距', - icon: 'none', - duration: 2000, - }) - } else { - if (this.kinds === 1) { - // 添加用户验光单 - if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || - this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || - this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' - ) { - uni.showToast({ - title: '请输入您的验光数据', - icon: 'none', - duration: 2000, - }) - } else { - // if (this.confirm) { - store.dispatch('myLoveList/addMylove', { - uid: this.$store.state.user.userInfo.uid, - openid: this.$store.state.user.userInfo.openid, - // mp_name: this.$store.state.user.userInfo.mp_name, - leftSph: this.pickerInfoChioce.leftSph, - rightSph: this.pickerInfoChioce.rightSph, - leftCyl: this.pickerInfoChioce.leftCyl, - rightCyl: this.pickerInfoChioce.rightCyl, - leftAxi: this.pickerInfoChioce.leftAxi, - rightAxi: this.pickerInfoChioce.rightAxi, - pd: this.pd, // 瞳距 - mp_name: this.name, - // time: this.pickerInfoChioce.time, - // img_url2: "http://localhost:8087/images/shop_1/1/", - }).then(({ mp_id: mpId }) => { - this.mp_id = mpId - }) - flag = 1 - } - } - if (this.kinds === 2) { - // if (this.confirm) { - const leftList = ['leftSph', 'leftCyl', 'leftAxi'] - const rightList = ['rightSph', 'rightCyl', 'rightAxi'] - // let flag=0; - if (this.name !== this.oldname) { - store.dispatch('myLoveList/updateMylove', { - uid: this.$store.state.user.userInfo.uid, - openid: this.$store.state.user.userInfo.openid, - mp_id: this.mp_id, - keyname: 'name', - keyvalue: this.name, - }) - flag = 1 - } - if (this.pd !== this.oldpd) { - store.dispatch('myLoveList/updateMylove', { - uid: this.$store.state.user.userInfo.uid, - openid: this.$store.state.user.userInfo.openid, - mp_id: this.mp_id, - keyname: 'pd', - keyvalue: this.pd, - }) - flag = 1 - } - // 先验证是否输入有无空 - let q = true - for (let k = 0; k < 3; k++) { - q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && - this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') - } - if (q) { - for (let j = 0; j < 3; j++) { - if (this.pickerInfoList[j].nameIndex1 !== 0) { - store.dispatch('myLoveList/updateMylove', { - uid: this.$store.state.user.userInfo.uid, - openid: this.$store.state.user.userInfo.openid, - mp_id: this.mp_id, - keyname: leftList[j], - keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], - }) - } - if (this.pickerInfoList[j].nameIndex2 !== 0) { - store.dispatch('myLoveList/updateMylove', { - uid: this.$store.state.user.userInfo.uid, - openid: this.$store.state.user.userInfo.openid, - mp_id: this.mp_id, - keyname: rightList[j], - keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], - }) - } - flag = 1 - } - } else { - flag = 0 - uni.showToast({ - title: '请输入您的验光数据', - icon: 'none', - duration: 2000, - }) - } - - // } else { - // uni.showToast({ - // title: '请确认您的验光数据', - // icon: 'none', - // duration: 3000, - // }) - // } - } - } - } - if (flag !== 0) { - // 如果数据验证无误,那么更新验光单的数据 - store.dispatch('myLoveList/getLoveList', { - uid: this.$store.state.user.userInfo.uid, - }) - let i = 0 - // 判断出是哪一个sku被选中 - for (let index = 0; index < this.current.length; index++) { - // console.log('index', index, i, index !== this.current.length - 1) - if (index !== this.current.length - 1) { - // 后续需修改算法:目前暂定只有两个参数选择,后续若有多个参数需要修改实现自适应 - i = this.current[index] * this.attrList[1].attr.length - } else { - i += this.current[index] - } - } - // 判断是否其输入的人员数据是否已存在 - store.dispatch('order/saveParams', { - sk_id_arr: this.skuList[i], - current: this.current, - mp_id: this.mp_id, - attrList: this.attrList, - }) - this.$store.state.cart.buyItem = this.skuItem - // 跳转到确认订单页面 - uni.navigateTo({ - url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`, - }) - } + // 先处理验光部分的逻辑,如果ok在跳转 + let flag = 0 + if (this.name === '') { + uni.showToast({ + title: '请输入验光单取名', + icon: 'none', + duration: 2000, + }) + } else { + if (this.pd === '') { + uni.showToast({ + title: '请输入瞳距', + icon: 'none', + duration: 2000, + }) + } else { + if (this.kinds === 1) { + // 添加用户验光单 + if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || + this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || + this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' + ) { + uni.showToast({ + title: '请输入您的验光数据', + icon: 'none', + duration: 2000, + }) + } else { + // if (this.confirm) { + store.dispatch('myLoveList/addMylove', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + // mp_name: this.$store.state.user.userInfo.mp_name, + leftSph: this.pickerInfoChioce.leftSph, + rightSph: this.pickerInfoChioce.rightSph, + leftCyl: this.pickerInfoChioce.leftCyl, + rightCyl: this.pickerInfoChioce.rightCyl, + leftAxi: this.pickerInfoChioce.leftAxi, + rightAxi: this.pickerInfoChioce.rightAxi, + pd: this.pd, // 瞳距 + mp_name: this.name, + // time: this.pickerInfoChioce.time, + // img_url2: "http://localhost:8087/images/shop_1/1/", + }).then(({ + mp_id: mpId + }) => { + this.mp_id = mpId + }) + flag = 1 + } + } + if (this.kinds === 2) { + // if (this.confirm) { + const leftList = ['leftSph', 'leftCyl', 'leftAxi'] + const rightList = ['rightSph', 'rightCyl', 'rightAxi'] + // let flag=0; + if (this.name !== this.oldname) { + store.dispatch('myLoveList/updateMylove', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: this.mp_id, + keyname: 'name', + keyvalue: this.name, + }) + flag = 1 + } + if (this.pd !== this.oldpd) { + store.dispatch('myLoveList/updateMylove', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: this.mp_id, + keyname: 'pd', + keyvalue: this.pd, + }) + flag = 1 + } + // 先验证是否输入有无空 + let q = true + for (let k = 0; k < 3; k++) { + q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && + this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') + } + if (q) { + for (let j = 0; j < 3; j++) { + if (this.pickerInfoList[j].nameIndex1 !== 0) { + store.dispatch('myLoveList/updateMylove', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: this.mp_id, + keyname: leftList[j], + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j] + .nameIndex1], + }) + } + if (this.pickerInfoList[j].nameIndex2 !== 0) { + store.dispatch('myLoveList/updateMylove', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: this.mp_id, + keyname: rightList[j], + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j] + .nameIndex2], + }) + } + flag = 1 + } + } else { + flag = 0 + uni.showToast({ + title: '请输入您的验光数据', + icon: 'none', + duration: 2000, + }) + } + + // } else { + // uni.showToast({ + // title: '请确认您的验光数据', + // icon: 'none', + // duration: 3000, + // }) + // } + } + } + } + if (flag !== 0) { + // 如果数据验证无误,那么更新验光单的数据 + store.dispatch('myLoveList/getLoveList', { + uid: this.$store.state.user.userInfo.uid, + }) + let i = 0 + // 判断出是哪一个sku被选中 + for (let index = 0; index < this.current.length; index++) { + // console.log('index', index, i, index !== this.current.length - 1) + if (index !== this.current.length - 1) { + // 后续需修改算法:目前暂定只有两个参数选择,后续若有多个参数需要修改实现自适应 + i = this.current[index] * this.attrList[1].attr.length + } else { + i += this.current[index] + } + } + // 判断是否其输入的人员数据是否已存在 + store.dispatch('order/saveParams', { + wsp_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?shop_wood_id=${this.shop_wood_id}&count=${this.count}&name=${this.name}&isCart=false`, + }) + } }, } } @@ -909,91 +942,103 @@ import store from '@/store' <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; + 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; + display: flex; + flex-direction: column; + justify-content: flex-start; align-items: center; - .title{ + + .title { font-size: 16px; color: #333333; letter-spacing: -0.3px; @@ -1001,7 +1046,8 @@ import store from '@/store' line-height: 24px; margin: 4px 0; } - .loveList{ + + .loveList { display: flex; flex-direction: row; flex-wrap: wrap; @@ -1009,314 +1055,356 @@ import store from '@/store' 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; + 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; + background: rgba(255, 107, 74, 0.15); + color: #ff6b4a; } } - } - .goods-data { - width: 100%; - box-sizing: border-box; - padding: 37rpx 40rpx 0 40rpx; - background: #ffffff; - border-radius: 12rpx; - .opCollapse { - width: 100%; - padding-bottom: 28rpx; - margin-top: 7px; - border-bottom: 1px solid #e9e9e9; - .head { - display: flex; - justify-content: space-between; - height: 24px; - // font-family: PingFangSC-Medium; - font-size: 16px; - color: #333333; - letter-spacing: -0.3px; - text-align: justify; - line-height: 24px; - margin-bottom: 18rpx; - .headRighted { - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-bottom: 4px solid #cfcfcf; - transform: scaleY(-1); - margin-top: 10px; - } - .headMid { - font-size: 10px; - color: #999999; - letter-spacing: -0.19px; - margin-left: -120rpx; - } - .headRight { - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-bottom: 4px solid #cfcfcf; - margin-top: 10px; - } - } - .body { - font-size: 12px; - color: #666666; - letter-spacing: 0; - .bodyBox { - margin-top: 15px; - .names { - font-size: 12px; - color: #151515; - letter-spacing: 0; - text-align: justify; - line-height: 17px; - margin-left: 5px; - margin-right: 10px; - } - text { - font-size: 12px; - color: #666666; - letter-spacing: 0; - text-align: justify; - } - } - } - .goods-form { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #fff; - width: 100%; - padding: 40rpx 0; - .p1 { - font-size: 16px; - color: #333333; - letter-spacing: -0.3px; - text-align: justify; - line-height: 24px; - margin: 4px 0; - - } - .p2 { - font-size: 12px; - color: #999999; - letter-spacing: -0.23px; - margin-bottom: 32rpx; - } - .image2{ - width: 42rpx; - height: 34rpx; - margin-right: 12rpx; - } - .confirm { - display: flex; - align-items: center; - font-size: 12px; - color: #666666; - letter-spacing: -0.23px; - width: 684rpx; - .image1{ - margin-right:25rpx; - width: 42rpx; - height: 38rpx; - } - } - .picker{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - - .picker-choice{ - display: flex; - width: 684rpx; - align-items: center; - margin-bottom: 40rpx; - .input{ - border-bottom: 1px solid #CFCFCF; - height: 40rpx; - } - .choice-left{ - width: 210rpx; - .pd{ - font-size: 14px; - color: #333333; - letter-spacing: -0.26px; - text-align: justify; - line-height: 24px; - margin-right: 44rpx; - } - .p11 { - font-size: 14px; - color: #333333; - letter-spacing: -0.26px; - text-align: justify; - line-height: 24px; - // margin-right: 10px; - } - .p12 { - font-size: 10px; - color: #3F3F3F; - letter-spacing: -0.19px; - text-align: justify; - line-height: 24px; - } - - } - .p13 { - font-size: 10px; - color: #999999; - letter-spacing: -0.19px; - margin-right: 10px; - } - .p13-date { - font-size: 10px; - color: #999999; - letter-spacing: -0.19px; - margin-right: 5px; - } - picker{ - width: 144rpx; - height: 40rpx; - display: flex; - position: relative; - .p14 { - font-size: 14px; - color: #666666; - letter-spacing: -0.26px; - text-align: center; - width: 124rpx; - border-bottom: 1px solid #CFCFCF; - height: 38rpx; - } - image{ - width: 20rpx; - height: 20rpx; - position: absolute; - right: 20rpx; - top: 8rpx; - } - } - - } - } - - .ipts{ + } + + .goods-data { width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - // padding: 20rpx 36rpx; box-sizing: border-box; - .inputItem{ + padding: 37rpx 40rpx 0 40rpx; + background: #ffffff; + border-radius: 12rpx; + + .opCollapse { + width: 100%; + padding-bottom: 28rpx; + margin-top: 7px; + border-bottom: 1px solid #e9e9e9; + + .head { + display: flex; + justify-content: space-between; + height: 24px; + // font-family: PingFangSC-Medium; + font-size: 16px; + color: #333333; + letter-spacing: -0.3px; + text-align: justify; + line-height: 24px; + margin-bottom: 18rpx; + + .headRighted { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #cfcfcf; + transform: scaleY(-1); + margin-top: 10px; + } + + .headMid { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-left: -120rpx; + } + + .headRight { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #cfcfcf; + margin-top: 10px; + } + } + + .body { + font-size: 12px; + color: #666666; + letter-spacing: 0; + + .bodyBox { + margin-top: 15px; + + .names { + font-size: 12px; + color: #151515; + letter-spacing: 0; + text-align: justify; + line-height: 17px; + margin-left: 5px; + margin-right: 10px; + } + + text { + font-size: 12px; + color: #666666; + letter-spacing: 0; + text-align: justify; + } + } + } + + .goods-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #fff; + width: 100%; + padding: 40rpx 0; + + .p1 { + font-size: 16px; + color: #333333; + letter-spacing: -0.3px; + text-align: justify; + line-height: 24px; + margin: 4px 0; + + } + + .p2 { + font-size: 12px; + color: #999999; + letter-spacing: -0.23px; + margin-bottom: 32rpx; + } + + .image2 { + width: 42rpx; + height: 34rpx; + margin-right: 12rpx; + } + + .confirm { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + letter-spacing: -0.23px; + width: 684rpx; + + .image1 { + margin-right: 25rpx; + width: 42rpx; + height: 38rpx; + } + } + + .picker { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + + .picker-choice { + display: flex; + width: 684rpx; + align-items: center; + margin-bottom: 40rpx; + + .input { + border-bottom: 1px solid #CFCFCF; + height: 40rpx; + } + + .choice-left { + width: 210rpx; + + .pd { + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + text-align: justify; + line-height: 24px; + margin-right: 44rpx; + } + + .p11 { + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + text-align: justify; + line-height: 24px; + // margin-right: 10px; + } + + .p12 { + font-size: 10px; + color: #3F3F3F; + letter-spacing: -0.19px; + text-align: justify; + line-height: 24px; + } + + } + + .p13 { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-right: 10px; + } + + .p13-date { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-right: 5px; + } + + picker { + width: 144rpx; + height: 40rpx; + display: flex; + position: relative; + + .p14 { + font-size: 14px; + color: #666666; + letter-spacing: -0.26px; + text-align: center; + width: 124rpx; + border-bottom: 1px solid #CFCFCF; + height: 38rpx; + } + + image { + width: 20rpx; + height: 20rpx; + position: absolute; + right: 20rpx; + top: 8rpx; + } + } + + } + } + + .ipts { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + // padding: 20rpx 36rpx; + box-sizing: border-box; + + .inputItem { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 36rpx; + + .text { + margin-right: 100rpx; + } + + .input { + border-bottom: 1px solid #CFCFCF; + } + } + + } + } + } + } + + .choose { + width: 100%; + background: #ffffff; + border-radius: 12rpx; + margin-top: 20rpx; + padding: 40rpx 40rpx 112rpx 40rpx; + box-sizing: border-box; + + .chooseItem { + width: 100%; + padding-bottom: 32rpx; + border-bottom: 1px solid #e9e9e9; + margin-bottom: 28rpx; + } + + .chooseRes { + font-size: 12px; + color: #666666; + } + + .itemsWrap { display: flex; flex-direction: row; - justify-content: center; + flex-wrap: wrap; + justify-content: flex-start; align-items: center; - margin-bottom: 36rpx; - .text{ - margin-right: 100rpx; + padding-top: 24rpx; + + .item1 { + width: 64rpx; + height: 64rpx; + border-radius: 32rpx; + margin: 0 36rpx 24rpx 0; + transition: all 0.3s; + border: 1px solid #ffffff; } - .input{ - border-bottom: 1px solid #CFCFCF; + + .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; } } - } - } - } - } - .choose { - width: 100%; - background: #ffffff; - border-radius: 12rpx; - margin-top: 20rpx; - padding: 40rpx 40rpx 112rpx 40rpx; - box-sizing: border-box; - .chooseItem { - width: 100%; - padding-bottom: 32rpx; - border-bottom: 1px solid #e9e9e9; - margin-bottom: 28rpx; - } - .chooseRes { - font-size: 12px; - color: #666666; - } - .itemsWrap { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: center; - padding-top: 24rpx; - .item1 { - width: 64rpx; - height: 64rpx; - border-radius: 32rpx; - margin: 0 36rpx 24rpx 0; - transition: all 0.3s; - border: 1px solid #ffffff; - } - .item2 { - // width: 100rpx; - padding: 0 30rpx; - height: 60rpx; - margin: 0 20rpx 20rpx 0; - transition: all 0.3s; - background: #f2f2f2; - border-radius: 2px; - border-radius: 2px; - line-height: 60rpx; - text-align: center; - color: #666666; - font-size: 12px; - } - .active1 { - opacity: 0.7; - border: 1px solid #ff6b4a; - } - .active2 { - background: rgba(255, 107, 74, 0.15); - color: #ff6b4a; - } - } - } - .button { - width: 100%; - height: 112rpx; - background-color: #ff6b4a; - font-size: 16px; - color: #ffffff; - line-height: 112rpx; - text-align: center; - position: sticky; - bottom: 0rpx; - left: 0rpx; - z-index: 9999; - } + + .button { + width: 100%; + height: 112rpx; + background-color: #ff6b4a; + font-size: 16px; + color: #ffffff; + line-height: 112rpx; + text-align: center; + position: sticky; + bottom: 0rpx; + left: 0rpx; + z-index: 9999; + } } + /* sheet弹窗 */ - .sheet{ + .sheet { width: 100%; height: 100%; position: fixed; @@ -1324,12 +1412,12 @@ import store from '@/store' left: 0upx; bottom: 0upx; right: 0upx; - background:rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); z-index: 10000; } - + /* 显示时候的动画默认0.5s */ - .sheetView{ + .sheetView { width: 100%; height: 0upx; position: absolute; @@ -1338,18 +1426,19 @@ import store from '@/store' z-index: 10001; transition: all 0.5s; } - .sheetShow{ - top:0upx !important; + + .sheetShow { + top: 0upx !important; } + /* 关闭时的动画,时间自己可以设置0.5s*/ - .sheeHide{ - top:120% !important; - transition: all 0.5s; + .sheeHide { + top: 120% !important; + transition: all 0.5s; } - + /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ - .sheetView_active{ + .sheetView_active { height: 1042upx; } - </style> diff --git a/src/pages/address/addAddress.vue b/src/pages/address/addAddress.vue index 55e324d..11922f6 100644 --- a/src/pages/address/addAddress.vue +++ b/src/pages/address/addAddress.vue @@ -1,266 +1,258 @@ <template> - <form - class="wrap" - @submit="formSubmit" - @reset="formReset" - > - <view class="content"> - <view class="item,name"> - <text class="itemText">姓名</text> - <input - placeholder="收货人姓名(真实姓名)" - placeholder-style="color:#B8B8B8" - name="name" - :value="name" - /> - </view> - <view class="item,phone"> - <text class="itemText">电话</text> - <input - placeholder="手机号" - type="digit" - placeholder-style="color:#B8B8B8" - name="mobile" - v-model="mobile" - /> - </view> - <view class="item,phone"> - <text class="itemText">性别</text> - <picker - @change="bindPickerChange" - :value="index" - :range="sexArray" - name="sex" - > - <view class="uni-input">{{sexArray[sexIndex]}}</view> - </picker> - </view> - <view class="item,area"> - <text class="itemText">地区</text> - <view - class="btn" - v-if="pickerText===''" - @tap="openAddres" - >选择省/市/区</view> - <view - class="btn" - v-else - @tap="openAddres" - >{{pickerText}}</view> - <simple-address - ref="SimpleAddress" - :pickerValueDefault="cityPickerValueDefault" - @onConfirm="onConfirm" - themeColor="#007AFF" - name="address" - ></simple-address> - </view> - <view class="item,address"> - <text class="itemText">详细地址</text> - <input - placeholder="街道、小区门牌等详细地址" - name="addDetail" - :value="addDetial" - /> - </view> - <view class="item,check"> - <text class="itemText">设为默认地址</text> - <switch - :checked="isDefalutAddress" - color="#FF6B4A" - style="transform:scale(0.6)" - @change="changeDefalutAddress" - name="isDefault" - /> - </view> - <input /> - </view> - <button - form-type="submit" - class="button" v-if="addId">编辑</button> - <button - form-type="submit" - class="button" - v-else - >保存并使用</button> - </form> + <form class="wrap" @submit="formSubmit" @reset="formReset"> + <view class="content"> + <view class="item,name"> + <text class="itemText">姓名</text> + <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8" name="name" :value="name" /> + </view> + <view class="item,phone"> + <text class="itemText">电话</text> + <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8" name="mobile" + v-model="mobile" /> + </view> + <view class="item,phone"> + <text class="itemText">性别</text> + <picker @change="bindPickerChange" :value="sexIndex" :range="sexArray" name="sex"> + <view class="uni-input">{{sexArray[sexIndex]}}</view> + </picker> + </view> + <view class="item,area"> + <text class="itemText">地区</text> + <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> + <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> + <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" + themeColor="#007AFF" name="address"></simple-address> + </view> + <view class="item,address"> + <text class="itemText">详细地址</text> + <input placeholder="街道、小区门牌等详细地址" name="addDetail" :value="add_detail" /> + </view> + <view class="item,check"> + <text class="itemText">设为默认地址</text> + <switch :checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" + @change="changeDefalutAddress" name="is_default" /> + </view> + <input /> + </view> + <button form-type="submit" class="button" v-if="addId">编辑</button> + <button form-type="submit" class="button" v-else>保存并使用</button> + </form> </template> <script> -import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' -import store from '@/store' + import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' + import store from '@/store' -export default { - data () { - return { - cityPickerValueDefault: [0, 0, 1], - pickerText: '', - isDefalutAddress: true, - sexArray: ['男', '女'], - sexIndex: 0, - flag: 0, - addId: undefined, - name: '', - mobile: '', - addDetial: '', - isDefault: 0 - } - }, - onLoad (option) { - const { addId } = option - if (addId) { - this.addId = addId - store.dispatch('address/details', { - add_id: addId - }).then(() => { - uni.setNavigationBarTitle({ - title: '编辑地址' - }) - const { name, mobile, sex, add_detail: addDetial, default: isDefault,address } = this.$store.state.address.details - console.log('---', this.$store.state.address.details) - const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') - console.log(index) - this.cityPickerValueDefault = index.index - this.name = name - this.mobile = Number(mobile) - this.sexIndex = sex - this.addDetial = addDetial - this.isDefalutAddress = !!Number(isDefault) - this.pickerText = address - }) - } - }, - components: { - SimpleAddress - }, - methods: { - openAddres () { - this.cityPickerValueDefault = [0, 0, 1] - this.$refs.SimpleAddress.open() - }, - onConfirm (e) { - this.pickerText = e.label - console.log('lll', e, this.pickerText) - }, - changeDefalutAddress (e) { - this.isDefalutAddress = e.target.value - }, - bindPickerChange (e) { - console.log('picker发送选择改变,携带值为', e.target.value) - this.sexIndex = e.target.value - }, - formValidation (formdata) { - const { name, mobile, addDetail } = formdata - this.flag = false - if (name === '') { - uni.showModal({ - content: '请输入姓名', - showCancel: false - }) - return 0 - } - if (!(/^1[3456789]\d{9}$/.test(mobile))) { - uni.showModal({ - content: '请输入正确的手机号', - showCancel: false - }) - return 0 - } - if (this.pickerText === '') { - uni.showModal({ - content: '请选择收货地区', - showCancel: false - }) - return 0 - } - if (addDetail === '') { - uni.showModal({ - content: '请输入收货详细地址', - showCancel: false - }) - return 0 - } - this.flag = true - }, - formSubmit (e) { - const formdata = e.detail.value - this.formValidation(formdata) + export default { + data() { + return { + cityPickerValueDefault: [0, 0, 1], + pickerText: '', + isDefalutAddress: true, + sexArray: ['男', '女'], + sexIndex: 0, + flag: 0, + addId: undefined, + name: '', + mobile: '', + add_detail: '', + is_default: 0, + // sex:0 + } + }, + onLoad(option) { + const { + addId + } = option + if (addId) { + this.addId = addId + store.dispatch('address/details', { + add_id: addId, + uid:1 + }).then(() => { + uni.setNavigationBarTitle({ + title: '编辑地址' + }) + const { + name, + mobile, + sex, + add_id, + add_detail, + province, + city, + is_default, + address + } = this.$store.state.address.details + console.log('this.$store.state.address.details', this.$store.state.address.details) + let a = this.$store.state.address.details.province+"-"+this.$store.state.address.details.city+"-"+this.$store.state.address.details.address; + console.log('a', a); + const index = this.$refs.SimpleAddress.queryIndex( + a.split('-'), 'label') + console.log(index) + this.cityPickerValueDefault = index.index + this.name = name + this.mobile = Number(mobile) + this.sexIndex = sex + this.add_detail = add_detail + this.isDefalutAddress = !!Number(is_default) + this.pickerText = a + }) + } + }, + components: { + SimpleAddress + }, + methods: { + openAddres() { + this.cityPickerValueDefault = [0, 0, 1] + this.$refs.SimpleAddress.open() + }, + onConfirm(e) { + this.pickerText = e.label + console.log('lll', e, this.pickerText) + }, + changeDefalutAddress(e) { + this.isDefalutAddress = e.target.value + }, + bindPickerChange(e) { + console.log('picker发送选择改变,携带值为', e.target.value) + this.sexIndex = e.target.value + }, + formValidation(formdata) { + const { + name, + mobile, + addDetail + } = formdata + this.flag = false + if (name === '') { + uni.showModal({ + content: '请输入姓名', + showCancel: false + }) + return 0 + } + if (!(/^1[3456789]\d{9}$/.test(mobile))) { + uni.showModal({ + content: '请输入正确的手机号', + showCancel: false + }) + return 0 + } + if (this.pickerText === '') { + uni.showModal({ + content: '请选择收货地区', + showCancel: false + }) + return 0 + } + if (addDetail === '') { + uni.showModal({ + content: '请输入收货详细地址', + showCancel: false + }) + return 0 + } + this.flag = true + }, + formSubmit(e) { + const formdata = e.detail.value + this.formValidation(formdata) - const { name, mobile, addDetail, isDefault } = formdata - if (this.flag === true) { - const params = { - sex: this.sexIndex, - name, - address: this.pickerText, - mobile, - default: isDefault ? 1 : 0, - add_detail: addDetail, - longitude: 1, - latitude: 1 - } - if (this.addId) { - params.add_id = this.addId - } - store.dispatch('address/edit', params).then(() => { - console.log('fanhui') - uni.navigateBack({ - delta: 1 - }) - }) - } - } - } -} + const { + name, + mobile, + addDetail, + is_default + } = formdata + if (this.flag === true) { + console.log('this.pickerText', this.pickerText); + const addressOffice = this.pickerText.split("-"); + const params = { + sex: this.sexIndex, + name, + province: addressOffice[0], + city:addressOffice[1], + address: addressOffice[2], + uid:1, + mobile:'13910779120', + default: is_default ? 1 : 0, + add_detail: addDetail, + longitude: 1, + latitude: 1 + } + if (this.addId) { + params.add_id = this.addId + } + store.dispatch('address/edit', params).then(() => { + console.log('fanhui') + uni.navigateBack({ + delta: 1 + }) + }) + } + } + } + } </script> <style lang="scss"> -.wrap { - height: 100vh; - background-color: #f2f2f2; - font-family: PingFangSC-Regular; - letter-spacing: -0.23px; - padding-top: 19rpx; -} -.content { - background-color: #ffffff; - border-radius: 8px; - border-radius: 8px; - padding: 40rpx 56rpx; - margin-left: 40rpx; - width: 670rpx; - box-sizing: border-box; - .item { - display: flex; - justify-content: flex-start; - font-size: 14px; - align-items: center; - height: 112rpx; - border-bottom: 1rpx solid #e9e9e9; - .itemText { - width: 162rpx; - font-family: PingFangSC-Regular; - letter-spacing: -0.26px; - } - .btn { - color: #333333 !important; - } - } - .check { - justify-content: space-between; - } -} -.button { - position: fixed; - bottom: 0; - left: 0; - height: 112rpx; - width: 100%; - background: #ff6b4a; - display: flex; - justify-content: center; - align-items: center; - font-size: 16px; - color: #ffffff; - letter-spacing: -0.3px; -} -</style> + .wrap { + height: 100vh; + background-color: #f2f2f2; + font-family: PingFangSC-Regular; + letter-spacing: -0.23px; + padding-top: 19rpx; + } + + .content { + background-color: #ffffff; + border:1px #000 solid; + border-radius: 8px; + border-radius: 8px; + padding: 40rpx 56rpx; + margin-left: 40rpx; + width: 670rpx; + box-sizing: border-box; + + .item { + display: flex; + border:1px #000 solid; + justify-content: flex-start; + font-size: 14px; + align-items: center; + height: 112rpx; + border-bottom: 1rpx solid #e9e9e9; + + .itemText { + width: 162rpx; + font-family: PingFangSC-Regular; + letter-spacing: -0.26px; + } + + .btn { + color: #333333 !important; + } + } + + .check { + justify-content: space-between; + } + } + + .button { + position: fixed; + bottom: 0; + left: 0; + height: 112rpx; + width: 100%; + background: #ff6b4a; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + color: #ffffff; + letter-spacing: -0.3px; + } +</style> diff --git a/src/pages/address/addressList.vue b/src/pages/address/addressList.vue index f949109..05e26ec 100644 --- a/src/pages/address/addressList.vue +++ b/src/pages/address/addressList.vue @@ -21,7 +21,8 @@ </view> <view class="order-user-body"> <image src="../../static/myorder-paying-location.png"></image> - <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> + <!-- <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> --> + <text class="address">{{item.province}}{{item.city}}{{item.address}}\n{{item.add_detail}}</text> </view> <image @click.stop="toEditAddress(item.add_id)" @@ -62,10 +63,14 @@ export default { if (edit) { this.edit = true } - store.dispatch('address/list') + store.dispatch('address/list',{ + uid:1 + }) }, onShow() { - store.dispatch('address/list') + store.dispatch('address/list',{ + uid:1 + }) }, methods: { toAddAddress() { diff --git a/src/pages/cart/cart.vue b/src/pages/cart/cart.vue index 0bd973e..991bc79 100644 --- a/src/pages/cart/cart.vue +++ b/src/pages/cart/cart.vue @@ -1,545 +1,527 @@ -<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) - } - 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: 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 - }) - }, - // onLoad: async function() { - // }, - methods: { - // 全选按钮 - pClick() { - const pStatus = !this.cartList.find(item => !item.isChecked) - const 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 - }) - }) - }, - // 底部弹窗开关 - 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, skId) { - uni.navigateTo({ - url: '../details/details?pid=' + id + '&sk_id=' + skId, - 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; - } - } - } -} -/* 隐藏滚动条 */ -::-webkit-scrollbar { - width: 0; - height: 0; - color: transparent; -} +<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" 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.shop_wood_id, item.wsp_id)">{{item.wsp_sku_name}}</view> + <view class="describ" + @click="showBottom(3, item.shop_wood_id, item.wsp_id, item.mp_id, item.cart_id, index)"> + <view class="desL"> + <view class="people"> + 使用人:{{item.peopleName}} + </view> + <view class="skuInfo"> + {{item.wsp_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.price*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" :wsp_id="wsp_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, + wsp_id: String, + mp_id: String, + isShowBottom: false, // 底部弹窗开关 + cart_id: Number, + maxCount: 20, + cartIndex: Number, + cartList: [], + } + }, + computed: { + pIsoPen() { + if (this.cartList.length > 0) { + const temp = !this.cartList.find(item => !item.isChecked) + // console.log('temptemp', temp) + return temp + } + return false + }, + goodInfo() { + return this.$store.state.read.goodInfo + }, + totalPrice() { + let totalPrice = 0 + this.cartList.forEach((item) => { + if (item.isChecked) { + totalPrice += item.price * item.num + } + }) + return totalPrice + }, + }, + onShow: 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 + }) + }, + // onLoad: async function() { + // }, + methods: { + // 全选按钮 + pClick() { + const pStatus = !this.cartList.find(item => !item.isChecked) + const 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, wsp_id, price, pid, num, cart_id, index) { + // console.log('modi',mp_id,wsp_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, + wsp_id: wsp_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 + }) + }) + }, + // 底部弹窗开关 + showBottom(isCart, pid, skId, mp_id, cart_id, index) { + store.dispatch('read/fetch', { + // shop_wood_id:pid, + shop_wood_id:681, + wsp_id: skId, + }).then(() => { + this.cartIndex = index + this.wsp_id = skId + this.shop_wood_id = pid + this.mp_id = mp_id + this.isCart = isCart + this.cart_id = cart_id + this.isShowBottom = true + }) + }, + closeBottom() { + this.isShowBottom = false + }, + toGoods(id, skId) { + uni.navigateTo({ + url: '../details/details?pid=' + id + '&wsp_id=' + skId, + 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, + wsp_id: item.wsp_id, + price: item.price, + pid: item.shop_wood_id, + 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, + wsp_id: item.wsp_id, + price: item.price, + pid: item.shop_wood_id, + 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; + // border:1px #000 solid; + 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%; + // border:1px #000 solid; + 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: 90rpx; + height: 112rpx; + width: 100%; + // border:1px #000 solid; + background-color: #FFF; + 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; + } + } + } + } + + /* 隐藏滚动条 */ + ::-webkit-scrollbar { + width: 0; + height: 0; + color: transparent; + } </style> diff --git a/src/pages/confirmOrder/confirmOrder.vue b/src/pages/confirmOrder/confirmOrder.vue index 14eab55..34b816e 100644 --- a/src/pages/confirmOrder/confirmOrder.vue +++ b/src/pages/confirmOrder/confirmOrder.vue @@ -1,190 +1,123 @@ <template> - <view class="wrap"> - <view></view> - <view - class="addAddress" - @tap="toaddAddress" - v-if="this.showAddress" - > - <view class="addIcon"> - <image - src="../../static/add.png" - mode="aspectFill" - ></image> - </view> - <view class="addressText">{{addAddress}}</view> - <image - src="../../static/right.png" - mode="aspectFill" - ></image> - </view> - <view - v-else - @tap="toaddAddress" - class="list order-user" - > - <view class="order-user-head"> - <view class="name"> - <view - v-if="addressInfo.default === '1'" - class="default" - ><text>默认</text></view>{{addressInfo.name}} - </view> - <text class="mobile">{{addressInfo.mobile}}</text> - </view> - <view class="order-user-body"> - <image src="../../static/myorder-paying-location.png"></image> - <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> - </view> - <image - class="arrow" - src="../../static/right.png" - mode="aspectFill" - ></image> - </view> - <view class="content"> - <view class="orderInfo"> - <view class="title"> - <image - src="../../static/store.png" - mode="aspectFill" - style="width: 40rpx;height: 40rpx;" - ></image> - <text>非常戴镜</text> - </view> - - <view - class="infoBox" - v-if="isCart == 'true'" - v-for="(item, index) in checkedCartLst" - :key="index" - > - <view class="infoTop"> - <image - :src="item.img_index_url" - mode="aspectFill" - ></image> - <view class="infoRight"> - <text class="goodName">{{item.p_name}}</text> - <text class="remarks">支持7天无理由退货 顺丰发货</text> - <view class="priceBox"> - <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost"> - ¥{{item.oldPrice*item.num}} - </text></view> - <view class="counter"> - <view - class="btn" - disabled="this.disabled" - type="default" - @click="counter(false,index)" - >-</view> - <text>{{checkedCartLst[index].num}}</text> - <view - class="btn" - type="default" - @click="counter(true,index)" - >+</view> - </view> - </view> - </view> - </view> - <view class="infoBottom"> - <view class="norm">规格 <text> - <!-- 长度超出变省略号未做 --> - <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> - </block> - </text></view> - <view class="shippingMethod">使用人 <text> - {{item.peopleName}} - </text></view> - <view class="shippingMethod">配送方式 <text>快递</text></view> - <view class="message">买家留言 - <input - type="text" - :value="note" - placeholder="建议提前协商(50字以内)" - /> - </view> - </view> - </view> + <view class="wrap"> + <view></view> + <view class="addAddress" @tap="toaddAddress" v-if="this.showAddress"> + <view class="addIcon"> + <image src="../../static/add.png" mode="aspectFill"></image> + </view> + <view class="addressText">{{addAddress}}</view> + <image src="../../static/right.png" mode="aspectFill"></image> + </view> + <view v-else @tap="toaddAddress" class="list order-user"> + <view class="order-user-head"> + <view class="name"> + <view v-if="addressInfo.is_default ===1" class="default"><text>默认</text></view>{{addressInfo.name}} + </view> + <text class="mobile">{{addressInfo.mobile}}</text> + </view> + <view class="order-user-body"> + <image src="../../static/myorder-paying-location.png"></image> + <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> + </view> + <image class="arrow" src="../../static/right.png" mode="aspectFill"></image> + </view> + <view class="content"> + <view class="orderInfo"> + <view class="title"> + <image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image> + <text>非常戴镜</text> + </view> - <view - class="infoBox" - v-if="isCart !== 'true'" - > - <view class="infoTop"> - <image - :src="buyItem.pic" - mode="aspectFill" - ></image> - <view class="infoRight"> - <text class="goodName">{{goodInfo.p_name}}</text> - <text class="remarks">支持7天无理由退货 顺丰发货</text> - <view class="priceBox"> - <view class="price">¥{{buyItem.real_price * count}}<text class="originCost"> - ¥{{buyItem.out_price * count}} - </text></view> - <view class="counter"> - <view - class="btn" - disabled="this.disabled" - type="default" - @click="counter(false)" - >-</view> - <text>{{count}}</text> - <view - class="btn" - type="default" - @click="counter(true)" - >+</view> - </view> - </view> - </view> - </view> - <view class="infoBottom"> - <view class="norm">规格 <text> - <!-- 长度超出变省略号未做 --> - <block - v-for="(item, index) in current" - :key="index" - >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> - </block> - </text></view> - <view class="shippingMethod">使用人 <text> - {{name}} - </text></view> - <view class="shippingMethod">配送方式 <text>快递</text></view> - <view class="message">买家留言 - <input - type="text" - :value="note" - placeholder="建议提前协商(50字以内)" - /> - </view> - </view> - </view> - </view> - <view class="payWay"> - <view class="item"> - <text>支付方式</text> - <view class="itemRight"> - <view class="rightText"> - <view class="choosePayWay"> - <image - src="../../static/chat_logo.png" - mode="aspectFill" - ></image> - <text>微信支付</text> - </view> - <!-- <view class="randomSubstraction">最高随机立减¥99</view> --> - </view> - <!-- <image + <view class="infoBox" v-if="isCart == 'true'" v-for="(item, index) in checkedCartLst" :key="index"> + <view class="infoTop"> + <image :src="item.img_index_url" mode="aspectFill"></image> + <view class="infoRight"> + <text class="goodName">{{item.wsp_sku_name}}</text> + <text class="remarks">支持7天无理由退货 顺丰发货</text> + <view class="priceBox"> + <view class="price">¥{{Number(item.price) * item.num}}<text class="originCost"> + ¥{{item.price*item.num}} + </text></view> + <view class="counter"> + <view class="btn" disabled="this.disabled" type="default" + @click="counter(false,index)">-</view> + <text>{{checkedCartLst[index].num}}</text> + <view class="btn" type="default" @click="counter(true,index)">+</view> + </view> + </view> + </view> + </view> + <view class="infoBottom"> + <view class="norm">规格 <text> + <!-- 长度超出变省略号未做 --> + <!-- <block>{{item.wsp_sku_name}} + <block v-if="index !== current.length -1">/</block> + </block> --> + </text></view> + <view class="shippingMethod">使用人 <text> + {{item.peopleName}} + </text></view> + <view class="shippingMethod">配送方式 <text>快递</text></view> + <view class="message">买家留言 + <input type="text" :value="note" placeholder="建议提前协商(50字以内)" /> + </view> + </view> + </view> + + <view class="infoBox" v-if="isCart !== 'true'"> + <view class="infoTop"> + <image :src="buyItem.pic" mode="aspectFill"></image> + <view class="infoRight"> + <text class="goodName">{{goodInfo.p_name}}</text> + <text class="remarks">支持7天无理由退货 顺丰发货</text> + <view class="priceBox"> + <view class="price">¥{{buyItem.real_price * count}}<text class="originCost"> + ¥{{buyItem.out_price * count}} + </text></view> + <view class="counter"> + <view class="btn" disabled="this.disabled" type="default" @click="counter(false)">- + </view> + <text>{{count}}</text> + <view class="btn" type="default" @click="counter(true)">+</view> + </view> + </view> + </view> + </view> + <view class="infoBottom"> + <view class="norm">规格 <text> + <!-- 长度超出变省略号未做 --> + <!-- <block v-for="(item, index) in current" :key="index">{{attrList[index].attr[item].name}} + <block v-if="index !== current.length -1">/</block> + </block> --> + </text></view> + <view class="shippingMethod">使用人 <text> + {{name}} + </text></view> + <view class="shippingMethod">配送方式 <text>快递</text></view> + <view class="message">买家留言 + <input type="text" :value="note" placeholder="建议提前协商(50字以内)" /> + </view> + </view> + </view> + </view> + <view class="payWay"> + <view class="item"> + <text>支付方式</text> + <view class="itemRight"> + <view class="rightText"> + <view class="choosePayWay"> + <image src="../../static/chat_logo.png" mode="aspectFill"></image> + <text>微信支付</text> + </view> + <view class="randomSubstraction">最高随机立减¥99</view> + </view> + <!-- <image src="../../static/right.png" mode="aspectFill" ></image> --> - </view> - </view> - <!-- <view class="item"> + </view> + </view> + <!-- <view class="item"> <text>优惠券</text> <view class="itemRight"> <view class="rightText"> @@ -199,21 +132,21 @@ ></image> </view> </view> --> - <view class="item"> - <text>运费</text> - <view class="itemRight"> - <view class="freight">免运费</view> - </view> - </view> - <view class="item"> - <text>合计</text> - <view class="itemRight"> - <view class="total">¥{{totalPrice}}</view> - <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> - </view> - </view> - </view> - <!-- + <view class="item"> + <text>运费</text> + <view class="itemRight"> + <view class="freight">免运费</view> + </view> + </view> + <view class="item"> + <text>合计</text> + <view class="itemRight"> + <view class="total">¥{{totalPrice}}</view> + <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> + </view> + </view> + </view> + <!-- <view class="checkBox"> <checkbox-group> <label> @@ -221,614 +154,697 @@ </label> </checkbox-group> </view> --> - </view> - <view class="last_zhanwei"></view> - <view class="footer"> - <view class="footerLeft">实付金额: - <text>¥{{totalPrice}}</text> - <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> - </view> - <view class="footerRight"> - <view - class="paybtn" - @tap="orderBuild" - >立即支付</view> - </view> - </view> - </view> + </view> + <view class="last_zhanwei"></view> + <view class="footer"> + <view class="footerLeft">实付金额: + <text>¥{{totalPrice}}</text> + <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> + </view> + <view class="footerRight"> + <view class="paybtn" @tap="orderBuild">立即支付</view> + </view> + </view> + </view> </template> <script> -import store from '@/store' -import MD5Util from '../../utils/md5' - -export default { - data() { - return { - name: String, - addAddress: '添加收货地址', - count: 1, - pid: 0, - disabled: false, - freight: 0.0, - showAddress: false, - note: '', - addressInfo: { - address: '', - }, - isCart: Boolean, - // isAnonymous: - checkedCartLst: [], - } - }, - onShow(addressId) { - // console.log('+-+-*-*-+-+',addressId) - if (addressId) { - store - .dispatch('address/details', { - add_id: addressId, - }) - .then(({ code, data }) => { - if (code === 1) { - // console.log('code', code, data) - this.showAddress = true - this.addressInfo = data - } - }) - } - }, - onLoad({ pid, addressId, isCart, count, name }) { - if (isCart == 'false') { - this.pid = pid - // store.dispatch('read/fetch', { - // pid, - // }) - } - this.count = count - this.name = name - this.isCart = isCart - - console.log('++++++++++++' + pid, addressId, isCart) - this.checkedCartLst = this.$store.state.cart.checkedCartLst - // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) - // 若已经选择地址 - if (addressId) { - store - .dispatch('address/details', { - add_id: addressId, - }) - .then(({ code, data }) => { - if (code === 1) { - // console.log('code', code, data) - this.showAddress = true - this.addressInfo = data - } - }) - } else { - store.dispatch('address/default').then(({ code, data }) => { - if (code === 1) { - // console.log('code', code, data) - this.showAddress = true - this.addressInfo = data - } - }) - } - }, - computed: { - totalPrice() { - if (this.isCart == 'true') { - let total = 0 - this.$store.state.cart.checkedCartLst.map(item => { - total += item.nowPrice * item.num - }) - return total - } else { - return this.buyItem.real_price * this.count - } - }, - buyItem() { - return this.$store.state.cart.buyItem - }, - // checkedCartLst(){ - // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) - // return this.$store.state.cart.checkedCartLst - // }, - goodInfo() { - // console.log('state', this.$store.state.read.goodInfo) - return this.$store.state.read.goodInfo - }, - skuInfo() { - return this.$store.state.order.param.sk_id_arr - }, - attrList() { - return this.$store.state.order.param.attrList - }, - current() { - return this.$store.state.order.param.current - }, - }, - methods: { - counter(isadd, index) { - if (isadd) { - if (this.isCart == 'true') { - this.checkedCartLst[index].num++ - } else { - this.count++ - } - } else { - if (this.isCart == 'true') { - this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- - } else { - this.count <= 1 ? (this.disabled = true) : this.count-- - } - } - }, - // 跳转添加地址页面 - toaddAddress() { - uni.navigateTo({ - url: `../address/addressList?edit=${1}`, - success: res => {}, - fail: error => { - console.log('跳转到地址列表页面失败====>', error) - }, - complete: () => {}, - }) - }, - // 下单 - orderBuild() { - uni.showLoading({ - title: '支付中', - }) - if (this.isCart === 'true') { - const checkedGoods = [] - const sk_id_arr = [] - this.checkedCartLst.map(item => { - checkedGoods.push(item.cart_id) - sk_id_arr.push(item.sk_id) - }) - store.dispatch('order/build', { - uid: this.$store.state.user.userInfo.uid, - address: JSON.stringify(this.addressInfo), - checkedGoods: checkedGoods, - sk_id_arr: sk_id_arr, - totalPrice: this.totalPrice, - }).then((res) => { - this.pay(res) - }) - } - if (this.isCart === 'false') { - const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param - store.dispatch('order/buyNow', { - pid: skId.pid, - sk_id: skId.sk_id, - number: this.count, - mp_id: mpId, - address: JSON.stringify(this.addressInfo), - totalPrice: this.totalPrice, - liuyan: this.note, - dir: 1, - }).then((res) => { - this.pay(res) - }) - } - }, - // 支付 - pay(res) { - console.log('pay', res) - 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() - } - }) - }, - }, -} + import store from '@/store' + import MD5Util from '../../utils/md5' + + export default { + data() { + return { + name: String, + addAddress: '添加收货地址', + count: 1, + pid: 0, + disabled: false, + freight: 0.0, + showAddress: false, + note: '', + addressInfo: { + address: '', + }, + isCart: Boolean, + // isAnonymous: + checkedCartLst: [], + } + }, + onShow(addressId) { + console.log('>>>>>>>>>>>>>>>>>addressId>>>>>>>>>>>>>>>', addressId) + if (addressId) { + store + .dispatch('address/details', { + add_id: addressId, + }) + .then(({ + code, + data + }) => { + if (code === 1) { + // console.log('code', code, data) + this.showAddress = true + this.addressInfo = data + } + }) + } + }, + onLoad({ + pid, + addressId, + isCart, + count, + name + }) { + console.log('>>>>>>confrm order ------>pid', pid); + console.log('>>>>>>confrm order ------>addressId', addressId); + console.log('>>>>>>confrm order ------>name', name); + if (isCart == 'false') { + this.pid = pid + // store.dispatch('read/fetch', { + // pid, + // }) + } + this.count = count + this.name = name + this.isCart = isCart + + console.log('++++++++++++' + pid, addressId, isCart) + this.checkedCartLst = this.$store.state.cart.checkedCartLst + console.log('++++++++++6666666666++', this.$store.state.cart.checkedCartLst) + // 若已经选择地址 + if (addressId) { + store + .dispatch('address/details', { + add_id: addressId, + }) + .then(({ + code, + data + }) => { + if (code === 1) { + // console.log('code', code, data) + this.showAddress = true + this.addressInfo = data + } + }) + } else { + store.dispatch('address/default', { + uid: 1, + add_id: "" + }).then(({ + code, + data + }) => { + if (code === 1) { + console.log('address/defaultaddress/defaultaddress/defaultcode', code, data) + this.showAddress = true + this.addressInfo = data + } + }) + } + }, + computed: { + totalPrice() { + if (this.isCart == 'true') { + let total = 0 + this.$store.state.cart.checkedCartLst.map(item => { + total += item.price * item.num + }) + return total + } else { + return this.buyItem.real_price * this.count + } + }, + buyItem() { + return this.$store.state.cart.buyItem + }, + // checkedCartLst(){ + // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) + // return this.$store.state.cart.checkedCartLst + // }, + goodInfo() { + // console.log('state', this.$store.state.read.goodInfo) + return this.$store.state.read.goodInfo + }, + skuInfo() { + return this.$store.state.order.param.sk_id_arr + }, + attrList() { + return this.$store.state.order.param.attrList + }, + current() { + return this.$store.state.order.param.current + }, + }, + methods: { + counter(isadd, index) { + if (isadd) { + if (this.isCart == 'true') { + this.checkedCartLst[index].num++ + } else { + this.count++ + } + } else { + if (this.isCart == 'true') { + this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- + } else { + this.count <= 1 ? (this.disabled = true) : this.count-- + } + } + }, + // 跳转添加地址页面 + toaddAddress() { + uni.navigateTo({ + url: `../address/addressList?edit=${1}`, + success: res => {}, + fail: error => { + console.log('跳转到地址列表页面失败====>', error) + }, + complete: () => {}, + }) + }, + // 下单 + orderBuild() { + uni.showLoading({ + title: '支付中', + }) + if (this.isCart === 'true') { + const checkedGoods = [] + const sk_id_arr = [] + this.checkedCartLst.map(item => { + checkedGoods.push(item.cart_id) + sk_id_arr.push(item.sk_id) + }) + store.dispatch('order/build', { + uid: this.$store.state.user.userInfo.uid, + address: JSON.stringify(this.addressInfo), + checkedGoods: checkedGoods, + sk_id_arr: sk_id_arr, + totalPrice: this.totalPrice, + }).then((res) => { + this.pay(res) + }) + } + if (this.isCart === 'false') { + const { + sk_id_arr: skId, + mp_id: mpId + } = this.$store.state.order.param + store.dispatch('order/buyNow', { + pid: skId.pid, + sk_id: skId.sk_id, + number: this.count, + mp_id: mpId, + address: JSON.stringify(this.addressInfo), + totalPrice: this.totalPrice, + liuyan: this.note, + dir: 1, + }).then((res) => { + this.pay(res) + }) + } + }, + // 支付 + pay(res) { + console.log('pay', res) + 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() + } + }) + }, + }, + } </script> <style lang="scss"> -.wrap { - height: 100vh; - background-color: #f2f2f2; - font-family: PingFangSC-Regular; - letter-spacing: -0.23px; - position: absolute; -} -.addAddress { - background-color: #ffffff; - box-sizing: border-box; - height: 124rpx; - width: 100%; - display: flex; - align-items: center; - padding: 0 40rpx; - .addIcon { - background-color: #f2f2f2; - height: 56rpx; - width: 60rpx; - border-radius: 4rpx; - display: flex; - justify-content: center; - align-items: center; - margin-right: 40rpx; - } - image { - height: 28rpx; - width: 30rpx; - } - .addressText { - font-size: 28rpx; - color: #333333; - margin-right: 364rpx; - } -} -.content { - background-color: #f2f2f2; - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 40rpx; - box-sizing: border-box; - .orderInfo { - width: 670rpx; - min-height: 488rpx; - background-color: #ffffff; - border-radius: 20rpx; - box-sizing: border-box; - padding: 0 40rpx 40rpx 40rpx; - .title { - display: flex; - align-items: center; - font-size: 28rpx; - color: #333333; - height: 60rpx; - line-height: 40rpx; - padding: 10rpx 10rpx 10rpx 0rpx; - image { - margin-right: 20rpx; - } - } - .infoBox { - margin-top: 42rpx; - .infoTop { - display: flex; - flex-direction: row; - image { - height: 188rpx; - width: 188rpx; - margin-right: 24rpx; - } - .infoRight { - width: 374rpx; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: space-between; - .goodName { - font-size: 28rpx; - color: #333333; - } - .remarks { - font-size: 20rpx; - color: #999999; - } - .priceBox { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - .price { - color: #ff6b4a; - font-size: 28rpx; - text{ - margin-left: 10rpx; - } - } - .originCost { - text-decoration: line-through; - color: #999999; - font-size: 20rpx; - } - .counter { - display: flex; - flex-direction: row; - justify-content: space-between; - 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; - } - } - } - } - } - .infoBottom { - display: flex; - flex-direction: column; - justify-content: flex-start; - font-size: 24rpx; - color: #333333; - text { - color: #999999; - margin-left: 20rpx; - } - - .norm { - margin-top: 28rpx; - } - .shippingMethod { - margin-top: 12rpx; - } - .message { - display: flex; - flex-direction: row; - align-items: center; - margin-top: 18rpx; - input { - margin-left: 20rpx; - width: 75%; - } - } - } - } - } - .payWay { - height: 464rpx; - width: 670rpx; - background-color: #ffffff; - color: #333333; - font-size: 24rpx; - border-radius: 20rpx; - box-sizing: border-box; - padding: 0 52rpx 0rpx 40rpx; - margin-top: 20rpx; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - .item { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - height: 115rpx; - .itemRight { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - image { - height: 24rpx; - width: 12rpx; - } - .rightText { - margin-right: 20rpx; - text-align: right; - .choosePayWay { - display: flex; - align-items: center; - text { - color: #333333; - } - image { - height: 36rpx; - width: 40rpx; - margin-right: 8px; - } - } - .randomSubstraction { - color: #ff6b4a; - } - .preferentialWay { - color: #999999; - } - } - .freight, - .total { - margin-right: 32rpx; - } - text { - color: #ff6b4a; - } - } - } - } - // .checkBox { - // height: 58rpx; - // line-height: 58rpx; - // width: 100%; - // margin-top: 36rpx; - // margin-left: 40rpx; - // font-size: 12px; - // color: #999999; - // } -} -.footer { - height: 112rpx; - width: 100%; - background-color: #fff; - font-size: 16px; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - bottom: 0; - z-index: 9999; - .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; - } - } -} -// 地址信息样式 -.order-user { - width: 670rpx; - height: 228rpx; - background: #ffffff; - border-radius: 14rpx; - margin: 0 auto; - margin-top: 20rpx; - position: relative; - .order-user-head { - display: flex; - height: 108rpx; - width: 100%; - align-items: center; - padding-left: 126rpx; - box-sizing: border-box; - .name { - display: flex; - justify-content: space-between; - font-size: 14px; - color: #333333; - letter-spacing: -0.26px; - margin-right: 20rpx; - .default { - height: 40rpx; - width: 80rpx; - background-color: #4a90e2; - border-radius: 13px; - border-radius: 13px; - text-align: center; - margin-right: 20rpx; - text { - display: flex; - justify-content: center; - align-items: center; - font-size: 12px; - color: #ffffff; - letter-spacing: -0.23px; - } - } - } - .mobile { - font-size: 14px; - color: #999999; - letter-spacing: -0.26px; - } - } - .order-user-body { - display: flex; - width: 100%; - image { - width: 24px; - height: 28px; - margin: 12rpx 32rpx 0 40rpx; - } - .address { - font-weight: bold; - font-size: 14px; - color: #333333; - letter-spacing: -0.26px; - } - } - .arrow { - width: 12px; - height: 12px; - position: absolute; - right: 40rpx; - bottom: 104rpx; - } -} -.last_zhanwei { - background: #f2f2f2; - height: 60px; -} -</style> + .wrap { + height: 100vh; + background-color: #f2f2f2; + font-family: PingFangSC-Regular; + letter-spacing: -0.23px; + position: absolute; + } + + .addAddress { + background-color: #ffffff; + box-sizing: border-box; + height: 124rpx; + width: 100%; + display: flex; + align-items: center; + padding: 0 40rpx; + + .addIcon { + background-color: #f2f2f2; + height: 56rpx; + width: 60rpx; + border-radius: 4rpx; + display: flex; + justify-content: center; + align-items: center; + margin-right: 40rpx; + } + + image { + height: 28rpx; + width: 30rpx; + } + + .addressText { + font-size: 28rpx; + color: #333333; + margin-right: 364rpx; + } + } + + .content { + background-color: #f2f2f2; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40rpx; + box-sizing: border-box; + + .orderInfo { + width: 670rpx; + min-height: 488rpx; + background-color: #ffffff; + border-radius: 20rpx; + box-sizing: border-box; + padding: 0 40rpx 40rpx 40rpx; + + .title { + display: flex; + align-items: center; + font-size: 28rpx; + color: #333333; + height: 60rpx; + line-height: 40rpx; + padding: 10rpx 10rpx 10rpx 0rpx; + + image { + margin-right: 20rpx; + } + } + + .infoBox { + margin-top: 42rpx; + + .infoTop { + display: flex; + flex-direction: row; + + image { + height: 188rpx; + width: 188rpx; + margin-right: 24rpx; + } + + .infoRight { + width: 374rpx; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + + .goodName { + font-size: 28rpx; + color: #333333; + } + + .remarks { + font-size: 20rpx; + color: #999999; + } + + .priceBox { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .price { + color: #ff6b4a; + font-size: 28rpx; + + text { + margin-left: 10rpx; + } + } + + .originCost { + text-decoration: line-through; + color: #999999; + font-size: 20rpx; + } + + .counter { + display: flex; + flex-direction: row; + justify-content: space-between; + 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; + } + } + } + } + } + + .infoBottom { + display: flex; + flex-direction: column; + justify-content: flex-start; + font-size: 24rpx; + color: #333333; + + text { + color: #999999; + margin-left: 20rpx; + } + + .norm { + margin-top: 28rpx; + } + + .shippingMethod { + margin-top: 12rpx; + } + + .message { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 18rpx; + + input { + margin-left: 20rpx; + width: 75%; + } + } + } + } + } + + .payWay { + height: 464rpx; + width: 670rpx; + background-color: #ffffff; + color: #333333; + font-size: 24rpx; + border-radius: 20rpx; + box-sizing: border-box; + padding: 0 52rpx 0rpx 40rpx; + margin-top: 20rpx; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + .item { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 115rpx; + + .itemRight { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + image { + height: 24rpx; + width: 12rpx; + } + + .rightText { + margin-right: 20rpx; + text-align: right; + + .choosePayWay { + display: flex; + align-items: center; + + text { + color: #333333; + } + + image { + height: 36rpx; + width: 40rpx; + margin-right: 8px; + } + } + + .randomSubstraction { + color: #ff6b4a; + } + + .preferentialWay { + color: #999999; + } + } + + .freight, + .total { + margin-right: 32rpx; + } + + text { + color: #ff6b4a; + } + } + } + } + + // .checkBox { + // height: 58rpx; + // line-height: 58rpx; + // width: 100%; + // margin-top: 36rpx; + // margin-left: 40rpx; + // font-size: 12px; + // color: #999999; + // } + } + + .footer { + height: 112rpx; + width: 100%; + background-color: #fff; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + bottom: 0; + z-index: 9999; + + .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; + } + } + } + + // 地址信息样式 + .order-user { + width: 670rpx; + height: 228rpx; + background: #ffffff; + border-radius: 14rpx; + margin: 0 auto; + margin-top: 20rpx; + position: relative; + + .order-user-head { + display: flex; + height: 108rpx; + width: 100%; + align-items: center; + padding-left: 126rpx; + box-sizing: border-box; + + .name { + display: flex; + justify-content: space-between; + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + margin-right: 20rpx; + + .default { + height: 40rpx; + width: 80rpx; + background-color: #4a90e2; + border-radius: 13px; + border-radius: 13px; + text-align: center; + margin-right: 20rpx; + + text { + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + color: #ffffff; + letter-spacing: -0.23px; + } + } + } + + .mobile { + font-size: 14px; + color: #999999; + letter-spacing: -0.26px; + } + } + + .order-user-body { + display: flex; + width: 100%; + + image { + width: 24px; + height: 28px; + margin: 12rpx 32rpx 0 40rpx; + } + + .address { + font-weight: bold; + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + } + } + + .arrow { + width: 12px; + height: 12px; + position: absolute; + right: 40rpx; + bottom: 104rpx; + } + } + + .last_zhanwei { + background: #f2f2f2; + height: 60px; + } +</style> diff --git a/src/pages/details/components/Introduce.vue b/src/pages/details/components/Introduce.vue index d99ef9c..af6f59b 100644 --- a/src/pages/details/components/Introduce.vue +++ b/src/pages/details/components/Introduce.vue @@ -1,113 +1,115 @@ <template> <view class="introduce"> <!-- 迭代时建议配合接口修改 为数组 --> - <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> + + <view v-if="Tag.Age && Tag.Age.length !== 0"> <view> 年龄:<view - v-for="(item,index) in tag.prod_tag_age" + v-for="(item,index) in Tag.Age" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Age.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> + <view v-if="Tag.Colour && Tag.Colour.length !== 0"> <view> 颜色:<view - v-for="(item,index) in tag.prod_tag_color" + v-for="(item,index) in Tag.Colour" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Colour.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> + <view v-if="Tag.Shape && Tag.Shape.length !== 0"> <view> 脸型:<view - v-for="(item,index) in tag.prod_tag_face" + v-for="(item,index) in Tag.Shape" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Shape.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> + <view v-if="Tag.Rim && Tag.Rim.length !== 0"> <view> 赠品:<view - v-for="(item,index) in tag.prod_tag_freesend" + v-for="(item,index) in Tag.Rim" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Rim.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> + <!-- <view v-if="Tag.prod_Tag_insurance && Tag.prod_Tag_insurance.length !== 0"> <view> 保险:<view - v-for="(item,index) in tag.prod_tag_insurance" + v-for="(item,index) in Tag.prod_Tag_insurance" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> + {{item.label}}<text v-if="index !== Tag.prod_Tag_insurance.length - 1">/</text> </view> </view> - </view> - <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> + </view> --> + <view v-if="Tag.Material && Tag.Material.length !== 0"> <view> 材质:<view - v-for="(item,index) in tag.prod_tag_metal" + v-for="(item,index) in Tag.Material" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Material.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> + <!-- <view v-if="Tag.Style && Tag.Style.length !== 0"> <view> 个性:<view - v-for="(item,index) in tag.prod_tag_personal" + v-for="(item,index) in Tag.Style" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Style.length - 1">/</text> </view> </view> - </view> - <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> + </view> --> + <view v-if="Tag.Eyeglasses && Tag.Eyeglasses.length !== 0"> <view> 场景:<view - v-for="(item,index) in tag.prod_tag_sense" + v-for="(item,index) in Tag.Eyeglasses" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Eyeglasses.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> + <view v-if="Tag.Gender && Tag.Gender.length !== 0"> <view> 性别:<view - v-for="(item,index) in tag.prod_tag_sex" + v-for="(item,index) in Tag.Gender" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Gender.length - 1">/</text> </view> </view> </view> - <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> + <!-- <view v-if="Tag.prod_Tag_style && Tag.prod_Tag_style.length !== 0"> <view> 风格:<view - v-for="(item,index) in tag.prod_tag_style" + v-for="(item,index) in Tag.prod_Tag_style" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> + {{item.label}}<text v-if="index !== Tag.prod_Tag_style.length - 1">/</text> </view> </view> - </view> - <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> + </view> --> + + <view v-if="Tag.Colour && Tag.Colour.length !== 0"> <view> 重量:<view - v-for="(item,index) in tag.prod_tag_weight" + v-for="(item,index) in Tag.Colour" :key="index" > - {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> + {{item}}<text v-if="index !== Tag.Colour.length - 1">/</text> </view> </view> </view> @@ -117,7 +119,7 @@ <script> export default { props: { - tag: Object, + Tag: Object, }, created() { }, diff --git a/src/pages/details/details.vue b/src/pages/details/details.vue index 790ff1c..70fa064 100644 --- a/src/pages/details/details.vue +++ b/src/pages/details/details.vue @@ -66,7 +66,7 @@ class="screen_item" v-if="item_current === 0" > - <Introduce :tag="tag" /> + <Introduce :Tag="Tag" /> </view> <!-- 规格参数 --> <view @@ -172,7 +172,8 @@ <BottomSheet :isCart="isCart" @addCart="addCart" - :pid="pid" + :shop_wood_id="shop_wood_id" + :wsp_id="skId" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom" @@ -256,8 +257,8 @@ export default { return this.$store.state.details.goodsInfo }, // 商品介绍商品标签 - tag() { - return this.$store.state.details.tag + Tag() { + return this.$store.state.details.Tag }, // 规格参数 specification() { @@ -269,7 +270,7 @@ export default { }, // 商品详情 more() { - return this.$store.state.details.more + return this.$store.state.details.shop_wood_desc_rich_text }, // 购物车数目 cartNumber() { @@ -376,7 +377,7 @@ export default { } return { title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等) - path: '/pages/details/details?sid=0&pid=' + this.pid, + path: '/pages/details/details?sid=0&pid=' + this.shop_wood_id, imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 success: function (res) { if (res.errMsg === 'shareAppMessage:ok') { @@ -428,7 +429,7 @@ export default { addCartList.sk_id = skId addCartList.num = num // addCartList.checkedSKU = checkedSKU - addCartList.pid = this.pid + addCartList.shop_wood_id = this.shop_wood_id addCartList.price = price console.log('添加购物车的参数', addCartList) store.dispatch('cart/addCart', addCartList).then((res) => { diff --git a/src/pages/myOrder/components/OrderCard.vue b/src/pages/myOrder/components/OrderCard.vue index 7461f82..2613512 100644 --- a/src/pages/myOrder/components/OrderCard.vue +++ b/src/pages/myOrder/components/OrderCard.vue @@ -1,110 +1,79 @@ <template> - <view> - <view - class="card" - v-if="current == status" - - > - <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" - @click="toOrderInfo(status,order.pay_id)" - 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" @click="cancleOrder">取消订单</view> - <view class="btn-type2" @click="paylog">去支付</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" @click="toDetail(order.order_info[0].pid)">再次购买</view> - </view> - <!-- <view class="btns" v-if="status == '3'"> - <view class="btn-type2">再次购买</view> - </view> --> - </view> - <view class="card" v-if="current == '10'" > + <view> + <view class="card" v-if="current == '200000' "> <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> --> + <text class="orderId" v-if="order_status == '0'||order_status == '100000'">订单号:{{order.order_no}}</text> + <text class="orderId" + v-if="order_status == '200000'||order_status == '300000'">下单时间:{{order.order_time}}</text> + <text class="orderType" v-if="order_status=='100000'">待付款</text> + <text class="orderType" v-if="order_status=='200000'">待收货</text> + <text class="orderType" v-if="order_status == '200000'||order_status == '300000'">已完成</text> + <text class="orderType" v-if="order_status == '300000'">已评价</text> </view> - <view class="orderCardInfo" @click="toOrderInfo(status,order.pay_id)" v-for="(orderInfo) in orderInfoList" :key="orderInfo"> - <image :src="orderInfo.imgUrl" mode="aspectFill"></image> + <view class="orderCardInfo" @click="toOrderInfo(order_status, order.order_id)" + v-for="(orderInfo, index) in orderInfoList" :key="index"> + <!-- --> + <image :src="orderInfo.img" mode="aspectFill"></image> <view class="infoText"> - <view class="orderName">{{orderInfo.p_name}}</view> - <view class="orderDescrib">{{orderInfo.p_name}}</view> + <view class="orderName">{{orderInfo.wsp_sku_name}}--1</view> + <view class="orderDescrib">{{orderInfo.wsp_sku_name}}</view> <view class="infoText-bottom"> - <view class="markPrice">{{orderInfo.nowPrice}}</view> + <view class="markPrice">{{orderInfo.price}}</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" @click="cancleOrder">取消订单</view> + <view class="payPrice">总额:<text class="priceNum">{{orderObj.all_money}}</text>,优惠:<text class="priceNum">{{orderObj.reduce_all_price}}</text>,实付:<text class="priceNum">{{orderObj.final_money}}</text> </view> + <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> + <view class="btns" v-if="order_status == '0'"> + <view class="btn-type1" @click="cancleOrder">取消订单</view> <view class="btn-type2" @click="paylog">去支付</view> </view> - <view class="btns" v-if="status == '1'"> + <view class="btns" v-if="order_status == '1'"> <view class="btn-type2">确认收货</view> </view> - <view class="btns" v-if="status == '2'||status == '3'"> + <view class="btns" v-if="order_status == '2'"> + <view class="btn-type2" @click="toDetail(orderObj.order_detail.sku_arr[0].shop_wood_id)">再次购买</view> + </view> + + </view> + <view class="card" v-if="current == '100000'"> + <view class="cardHeader"> + <text class="orderId">订单号:{{order.order_no}}</text> + <text class="orderId" + v-if="order_status == '200000'||order_status == '300000'">下单时间:{{order.order_time}}</text> + <text class="orderType" v-if="order_status=='100000'">待付款</text> + <text class="orderType" v-if="order_status=='200000'">待收货</text> + <text class="orderType" v-if="order_status == '200000'||order_status == '300000'">已完成</text> + <!-- <text class="orderType" v-if="order_status == '3'">已评价</text> --> + </view> + <view class="orderCardInfo" @click="toOrderInfo(order_status, order.order_id)" + v-for="(orderInfo) in orderInfoList"> + <image :src="orderInfo.img" mode="aspectFill"></image> + <view class="infoText"> + <view class="orderName">{{orderInfo.wsp_sku_name}}</view> + <view class="orderDescrib">{{orderInfo.wsp_sku_name}}</view> + <view class="infoText-bottom"> + <view class="markPrice">{{orderInfo.price}}</view> + <view class="buy-num">X {{orderInfo.num}}</view> + </view> + </view> + </view> + <view class="payPrice">总额:<text class="priceNum">{{orderObj.all_money}}</text>,优惠:<text class="priceNum">{{orderObj.reduce_all_price}}</text>,实付:<text class="priceNum">{{orderObj.final_money}}</text> </view> + <!-- <view class="payPrice">实付:<text class="priceNum">{{orderObj.final_money}}</text> </view> --> + <view class="btns" v-if="order_status == '100000'"> + <view class="btn-type1" @click="cancleOrder">取消订单</view> + <view class="btn-type2" @click="paylog">去支付</view> + </view> + <view class="btns" v-if="order_status == '200000'"> + <view class="btn-type1">确认收货</view> + </view> + <view class="btns" v-if="order_status == '200000'||order_status == '300000'"> + <!-- <view class="btn-type1" v-if="order_status == '200000'" @click="toDetail(order.order_info[0].pid)">确认收货</view> --> <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view> </view> - </view> - </view> + </view> + </view> </template> <script> @@ -113,117 +82,134 @@ export default { data() { return { - + orderObj:JSON.parse(this.order.order_data_obj) }; }, props: { /** * 订单数据 */ - order: {}, + order: {}, /** * 当前选择 */ - current:Number - + current: String + }, created() { - console.log('order',this.order); + console.error('order',this.order); + // let a = ; + // this.order = JSON.parse(this.order.order_data_obj); // console.log(this.order.status ); // console.log(this.current); }, - computed:{ - status(){ - return this.order.status - }, - orderInfoList(){ - return this.order.order_info + computed: { + order_status() { + return this.order.order_status + }, + // orderObj(){ + + // return a; + // }, + orderInfoList() { + let a = JSON.parse(this.order.order_data_obj); + console.log('orderInfoList=====>', a) + // return JSON.parse(this.order.order_info) + return a.order_detail.sku_arr; } }, - methods:{ + methods: { async paylog() { const openid = uni.getStorageSync('openid') const uid = this.order.uid; //先拿订单详情 await store.dispatch('orderRead/getOrderInfo', { - pay_id: this.order.pay_id, - uid: uid, - openid: openid - }).then((res)=>{ + pay_id: this.order.order_id, + uid: uid, + openid: openid + }).then((res) => { // console.log(res) - const { data, exKeyName: keyName } = res.order_info - const timeStamp = new Date().getTime().toString() - const total_fee = res.total_fee - const payId = res.pay_id - const nonceStr = 'asfafasfasfasfasf' - // 支付参数 - const fieldSet = { - openid: openid, - uid: uid, - shopid: 0, - payCate: 2020, - payMoney: total_fee, - 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: total_fee, - package: `prepay_id=${data.prepay_id}`, - signType: 'MD5', - paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), - success: (res) => { - // 支付成功 - uni.showModal({ - content: '支付成功', - showCancel: false, - }) - // //修改订单状态 待付款==>待收货 - // store.dispatch("statusConfirm/confirm", { - // uid: this.uid, - // openid: this.openid, - // oldway: "0", - // way: "1", - // pay_id: payId, - // judgeContent: "", - // orderInfo: this.orderInfo.order_info - // }) - }, - fail: (res) => { - // 支付失败 - uni.showModal({ - content: '支付失败', - showCancel: false, - }) - }, - complete: () => { - uni.hideLoading() - }, - }) - } else { - uni.showModal({ - content: '支付失败', - showCancel: false, - }) - console.log('支付失败') - uni.hideLoading() - } - }) + const { + data, + exKeyName: keyName + } = res.order_info + const timeStamp = new Date().getTime().toString() + const total_fee = res.total_fee + const payId = res.pay_id + const nonceStr = 'asfafasfasfasfasf' + // 支付参数 + const fieldSet = { + openid: openid, + uid: uid, + shopid: 0, + payCate: 2020, + payMoney: total_fee, + 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: total_fee, + package: `prepay_id=${data.prepay_id}`, + signType: 'MD5', + paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), + success: (res) => { + // 支付成功 + uni.showModal({ + content: '支付成功', + showCancel: false, + }) + // //修改订单状态 待付款==>待收货 + // store.dispatch("statusConfirm/confirm", { + // uid: this.uid, + // openid: this.openid, + // oldway: "0", + // way: "1", + // pay_id: payId, + // judgeContent: "", + // orderInfo: this.orderInfo.order_info + // }) + }, + fail: (res) => { + // 支付失败 + uni.showModal({ + content: '支付失败', + showCancel: false, + }) + }, + complete: () => { + uni.hideLoading() + }, + }) + } else { + uni.showModal({ + content: '支付失败', + showCancel: false, + }) + console.log('支付失败') + uni.hideLoading() + } + }) //修改订单状态 待付款==>待收货 // store.dispatch("statusConfirm/confirm", { // uid: this.uid, @@ -236,55 +222,57 @@ // }) }) }, - - async cancleOrder(e) { - const openid = uni.getStorageSync('openid') - const uid = this.order.uid; - //先从订单详情中拿到keyname - await store.dispatch('orderRead/getOrderInfo', { - pay_id: this.order.pay_id, - uid: uid, - openid: openid - }).then((res)=>{ - const keyname = res.order_info.keyname - uni.showModal({ - title: "提示", - content: "现在取消,订单不可恢复哦,确认取消吗?", - success: function(res) { - if (res.confirm) { - store.dispatch("cancelOrder/cancel", { - keyname: keyname, - uid: uid, - openid: openid - }).then((res)=>{ - console.log(res) - if(res.code == 1){ - store.dispatch("myOrder/getList", { - way: "" + + async cancleOrder(e) { + const openid = uni.getStorageSync('openid') + const uid = this.order.uid; + //先从订单详情中拿到keyname + await store.dispatch('orderRead/getOrderInfo', { + pay_id: this.order.pay_id, + uid: uid, + openid: openid + }).then((res) => { + const keyname = res.order_info.keyname + uni.showModal({ + title: "提示", + content: "现在取消,订单不可恢复哦,确认取消吗?", + success: function(res) { + if (res.confirm) { + store.dispatch("cancelOrder/cancel", { + keyname: keyname, + uid: uid, + openid: openid + }).then((res) => { + console.log(res) + if (res.code == 1) { + store.dispatch("myOrder/getList", { + way: "" + }); + } else { + uni.showToast({ + title: '取消失败,服务器错误!', + icon: 'none' + }) + } }); - }else{ - uni.showToast({ - title:'取消失败,服务器错误!', - icon:'none' - }) + } else if (res.cancel) { + console.log("用户点击取消"); } - }); - } else if (res.cancel) { - console.log("用户点击取消"); - } - } - }); - }); - + } + }); + }); + }, - toDetail(pid){ - console.log('pid',pid) + toDetail(pid) { + console.log('pid', pid) uni.navigateTo({ - url: '../details/details?pid='+pid, - fail: (res) => {console.log(res)}, + url: '../details/details?pid=' + pid, + fail: (res) => { + console.log(res) + }, }); }, - toRefundment(){ + toRefundment() { uni.navigateTo({ url: '../refundment/refundment', success: res => {}, @@ -292,162 +280,184 @@ complete: () => {} }); }, - toOrderInfo(status,payId){ - console.log(status,payId) - switch(status){ + 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': + case '100000': uni.navigateTo({ - url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, + url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId, fail(errMsg) { console.log(errMsg) } }) - - break; - case '2' || '3': + break; + case '200000': uni.navigateTo({ - url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, + url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId, fail(errMsg) { console.log(errMsg) } }) - break; + + break; + // case '200000' || '300000': + // uni.navigateTo({ + // url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId, + // fail(errMsg) { + // console.log(errMsg) + // } + // }) + // break; default: - break; - + 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> + .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; + border: 1px #000 solid; + 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; + // justify-content: justify-content-between; + align-items: center; + margin: 10rpx; + + // margin-left: auto; + // border: 1px solid #000; + .btn-type1 { + height: 48rpx; + width: 156rpx; + border: 1px solid #ff6b4a; + // border: 1px solid #000; + 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: 1px solid #000; + border-radius: 12px; + border-radius: 12px; + text-align: center; + line-height: 48rpx; + font-size: 12px; + color: #ffffff; + margin-left: 20rpx; + } + } + } +</style> diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue index 248eed4..58e7027 100644 --- a/src/pages/myOrder/myOrder.vue +++ b/src/pages/myOrder/myOrder.vue @@ -1,161 +1,169 @@ <template> - <view class="content"> - <view class="header"> - <!-- 搜索--> - <!-- <view class="searchBar"> - <icon class="searchIcon" type="search" size="14"></icon> - <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> - </view> --> - <view class="screenBar"> - <view - v-for="item in screenItems" - :key="item.current" - @click="onClickItem(item.current)" - > - <view - class="screenItem" - v-bind:class="{ active: current === item.current }" - >{{ item.text }}</view> - </view> - </view> - </view> - <view class="orderList"> - <view - v-for="(order) in orderList" - :key="order.pay_id" - > - <OrderCard - :order="order" - :current="current" - v-if="order.order_info !== null" - ></OrderCard> - </view> - </view> - <view class="footer">没有更多订单了,去商城看看吧~</view> - </view> + <view class="content"> + <view class="header"> + <!-- 搜索--> + <view class="searchBar"> + <icon class="searchIcon" type="search" size="14"></icon> + <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search" /> + </view> + <view class="screenBar"> + <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> + <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> + </view> + </view> + </view> + <view class="orderList"> + <view v-for="(order) in orderList" :key="order.order_id"> + <OrderCard :order="order" :current="current" v-if="order.order_info !== null"></OrderCard> + </view> + </view> + <view class="footer">没有更多订单了,去商城看看吧~</view> + </view> </template> <script> -import OrderCard from "./components/OrderCard.vue"; -import store from "@/store"; + import OrderCard from "./components/OrderCard.vue"; + import store from "@/store"; -export default { - components: { - OrderCard: OrderCard - }, - data() { - return { - // 顶部筛选项 - screenItems: [ - { current: "10", text: "全部" }, - { current: "0", text: "待付款" }, - { current: "1", text: "待收货" }, - { current: "2", text: "已完成" } - // {current:"3",text:'已评价'}, - // {current:"4",text:'退款'}, - ], - // 当前所在item 默认10-->全部 - current: "10" - }; - }, + export default { + components: { + OrderCard: OrderCard + }, + data() { + return { + // 顶部筛选项 + screenItems: [{ + current: "0", + text: "全部" + }, + { + current: "100000", + text: "待付款" + }, + { + current: "200000", + text: "待收货" + }, + { + current: "300000", + text: "已完成" + }, { + current: "400000", + text: '已评价' + }, + { + current: "500000", + text: '退款' + }, + ], + // 当前所在item 默认10-->全部 + current: "100000" + }; + }, -onShow() { - store.dispatch("myOrder/getList", { - way: "" - }); -}, - onLoad: function(option) { - // 获取订单列表 - // store.dispatch("myOrder/getList", { - // way: "" - // }); - // 从user过来传的status,给current,以显示对应item - this.current = option.status; - }, - computed: { - orderList() { - console.log('orderList', this.$store.state.myOrder.orderList); - return this.$store.state.myOrder.orderList; - } - }, - methods: { - // tab点击事件 - onClickItem(e) { - if (this.current !== e) { - this.current = e; - } - } - } -}; + onShow() { + store.dispatch("myOrder/getList", { + way: "" + }); + }, + onLoad: function(option) { + // 获取订单列表 + // store.dispatch("myOrder/getList", { + // way: "" + // }); + // 从user过来传的status,给current,以显示对应item + this.current = option.status; + }, + computed: { + orderList() { + console.log('orderList', this.$store.state.myOrder.orderList); + return this.$store.state.myOrder.orderList; + } + }, + methods: { + // tab点击事件 + onClickItem(e) { + if (this.current !== e) { + this.current = e; + } + } + } + }; </script> <style lang="scss"> -.content { - display: flex; - flex-direction: column; - align-items: center; - background-color: #f7f6f6; - min-height: 100vh; - .header { - background-color: #ffffff; - width: 100%; - // height: 232rpx; - padding: 20rpx 40rpx 16rpx 40rpx; - box-sizing: border-box; - position: fixed; - top: 0; - left: 0; - // .searchBar { - // width: 670rpx; - // display: flex; - // justify-content: center; - // align-items: center; - // box-sizing: border-box; - // padding: 0rpx 16rpx; - // border: 1px solid #ff6b4a; - // border-radius: 8rpx; - // background-color: #ffffff; - // } + .content { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f7f6f6; + min-height: 100vh; - .screenBar { - width: 670rpx; - // height: 110rpx; - height: 70rpx; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - color: #333333; - font-size: 32rpx; - } - .screenItem { - height: 50rpx; - font-size: 32rpx; - color: #333333; - display: flex; - justify-content: center; - align-items: center; - transition: all 0.2s; - } - .active { - // font-size: 34rpx; - color: #ec5d3b; - } - .searchIpt { - height: 68rpx; - width: 670rpx; - padding: 16rpx; - font-size: 28rpx; - box-sizing: border-box; - } - } - .orderList { - // margin-top: 232rpx; - margin-top: 132rpx; - } - .footer { - font-size: 14px; - color: #b8b8b8; - margin: 40rpx 0; - } -} -</style> + .header { + background-color: #ffffff; + width: 100%; + // height: 232rpx; + padding: 20rpx 40rpx 16rpx 40rpx; + box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + // .searchBar { + // width: 670rpx; + // display: flex; + // justify-content: center; + // align-items: center; + // box-sizing: border-box; + // padding: 0rpx 16rpx; + // border: 1px solid #ff6b4a; + // border-radius: 8rpx; + // background-color: #ffffff; + // } + + .screenBar { + width: 670rpx; + // height: 110rpx; + height: 70rpx; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: #333333; + font-size: 32rpx; + } + + .screenItem { + height: 50rpx; + font-size: 32rpx; + color: #333333; + display: flex; + justify-content: center; + align-items: center; + transition: all 0.2s; + } + + .active { + // font-size: 34rpx; + color: #ec5d3b; + } + + .searchIpt { + height: 68rpx; + width: 670rpx; + padding: 16rpx; + font-size: 28rpx; + box-sizing: border-box; + } + } + + .orderList { + // margin-top: 232rpx; + margin-top: 132rpx; + } + + .footer { + font-size: 14px; + color: #b8b8b8; + margin: 40rpx 0; + } + } +</style> diff --git a/src/pages/user/user.vue b/src/pages/user/user.vue index 9150b6a..7171a3a 100644 --- a/src/pages/user/user.vue +++ b/src/pages/user/user.vue @@ -77,7 +77,7 @@ ></image> </view> <view class="myOrder"> - <view class="orderHeader" @click="toMyOrder('10')" > + <view class="orderHeader" @click="toMyOrder('100000')" > <text>我的订单</text> <view class="btn"> 全部 @@ -90,7 +90,7 @@ <view class="orderBody"> <view class="item waitPay" - @click="toMyOrder('0')" + @click="toMyOrder('100000')" > <image src="../../static/img/user/waitDeliver.png" @@ -100,7 +100,7 @@ </view> <view class="item waitDeliver" - @click="toMyOrder('1')" + @click="toMyOrder('200000')" > <image src="../../static/img/user/waitPay.png" @@ -110,7 +110,7 @@ </view> <view class="item waitReceive" - @click="toMyOrder('2')" + @click="toMyOrder('300000')" > <image src="../../static/img/user/waitReceive.png" diff --git a/src/store/modules/address.js b/src/store/modules/address.js index adb3553..f9c2b63 100644 --- a/src/store/modules/address.js +++ b/src/store/modules/address.js @@ -36,11 +36,12 @@ const actions = { }, })) }, - list({ commit }) { + list({ commit },param) { request({ url: addressList, + data: param, success: (res) => { - commit('LIST', res.data.data) + commit('LIST', res.data.data.list) }, fail: () => { uni.showModal({ diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js index 0fc8bf2..8a033d0 100644 --- a/src/store/modules/cart.js +++ b/src/store/modules/cart.js @@ -31,10 +31,10 @@ const actions = { success: (res) => { let test = { isChecked: false, - itemNum:1, + num:1, price:0 } - commit('INIT', res.data.data) + commit('INIT', res.data.data.list) resolve(res.data.data) }, })) diff --git a/src/store/modules/details.js b/src/store/modules/details.js index bddae34..f5e1039 100644 --- a/src/store/modules/details.js +++ b/src/store/modules/details.js @@ -1,175 +1,257 @@ -import urlAlias from '../url' -import request from '../request' - -const { - read, - cartList, - makePost, -} = urlAlias - -const state = { - // 为配合参数选择框 - goodInfo: {}, - // 轮播图 - carousel: [ - '/static/img/detail/d9.png', - ], - // 商品基本信息 - goodsInfo: { - name: '暂无名称', - price: '暂无价格', - discountPrice: undefined, - tradeNumber: undefined, - }, - // 商品介绍 - tag: { - prod_tag_style: [{ - label: '青春学子风', - value: '54', - }], - }, - // 规格参数 - specification: [ - { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, - { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, - { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, - { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, - { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, - { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克(grams)' }, - ], - // 评价 - evaluate: { - rate: '100%', - star: 5, - tag: [{ name: '价格实惠' }], - }, - // 商品详情 - more: '', - // 购物车数目 - cartNumber: 0, - // skuList - skuList: [], - postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', -} - -const mutations = { - INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => { - state.goodInfo = goodInfo - state.carousel = carousel - state.goodsInfo = goodsInfo - state.tag = tag - state.specification = specification - state.evaluate = evaluate - state.more = more - state.skuList = skuList - // state.current = 1 - }, - CART: (state, number) => { - state.cartNumber = number - }, - POST: (state, url) => { - state.postUrl = url - }, -} - -const actions = { - // 获取详情 - details({ commit, rootState }, param) { - // console.log('paramparamparamparamparam', param); - return new Promise((resolve, reject) => request({ - url: read, - data: param, - success: ({ data: { data } }) => { - // console.log('details.details.details.details.details.data.tag', data) - console.log('this.statethis.statethis.statethis.state', this.state) - // return; - // 规格参数设置 - const specification=[]; - // specification[0].slength=1; - const parameter = { - frame_weight: data.frame_weight, - frame_width: data.frame_width, - glass_height: data.glass_height, - nose_width: data.nose_bridge, - lens_width:data.lens_width, - leg_long: data.leg_temple, - weight: data.weight, - } - for (let index = 0; index < specification.length; index++) { - if (specification[index].key !== 'weight') { - specification[index].slength = `${parameter[specification[index].key]}mm` - } else { - specification[index].slength = `${parameter[specification[index].key]}克(grams)` - } - } - - commit('INIT', { - goodInfo: data, - skuList: data.sku, - carousel: data.sku[0].sku_pic_arr_http, - goodsInfo: { - name: data.shop_wood_name, - price: data.sales_price, - discountPrice: data.sales_price - Number(0), - tradeNumber: data.sales_num, - }, - tag: data.tag_defined, - specification:[ - { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, - { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, - { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, - { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, - { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, - { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克(grams)' }, - ], - evaluate: { - rate: 5, - tag: data.judge.list, - // star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100), - star: 5, - }, - // eslint-disable-next-line - // more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), - more: data.shop_wood_desc_rich_text, - // current:1 - }) - resolve(data) - }, - fail: (res) => { - console.log('fail status ===>', res) - }, - })) - }, - // 获取购物车列表 - getCartNumber({ commit }, param) { - return new Promise((resolve) => request({ - url: cartList, - data: param, - success: ({ data: { data } }) => { - let number = 0 - for (let index = 0; index < data.length; index++) { - number += Number(data[index].num) - } - commit('CART', number) - }, - })) - }, - // 生成分享海报 - post({ commit }, param) { - return new Promise((resolve) => request({ - url: makePost, - data: param, - success: ({ data }) => { - commit('POST', data.data) - resolve() - }, - })) - }, -} - -export default { - namespaced: true, - state, - mutations, - actions, +import urlAlias from '../url' +import request from '../request' + +const { + read, + cartList, + makePost, +} = urlAlias + +const state = { + // 为配合参数选择框 + goodInfo: {}, + // 轮播图 + carousel: [ + '/static/img/detail/d9.png', + ], + // 商品基本信息 + goodsInfo: { + name: '暂无名称', + price: '暂无价格', + discountPrice: undefined, + tradeNumber: undefined, + }, + // 商品介绍 + // tag: { + // prod_tag_style: [{ + // label: '青春学子风', + // value: '54', + // }], + // }, + // 规格参数 + specification: [{ + key: 'frame_width', + img: '/static/img/detail/d2.png', + standard: '框架宽', + slength: '139mm' + }, + { + key: 'glass_width', + img: '/static/img/detail/d3.png', + standard: '镜片宽', + slength: '51mm' + }, + { + key: 'glass_height', + img: '/static/img/detail/d4.png', + standard: '镜片高', + slength: '45mm' + }, + { + key: 'nose_width', + img: '/static/img/detail/d5.png', + standard: '鼻架宽', + slength: '19mm' + }, + { + key: 'leg_long', + img: '/static/img/detail/d6.png', + standard: '框架耳长', + slength: '138mm' + }, + { + key: 'weight', + img: '/static/img/detail/d7.png', + standard: '框架重', + slength: '19克(grams)' + }, + ], + Tag: { + Age: [], + Colour: [], + Eyeglasses: [], + Gender: [], + Hinge: [], + Material: [], + Rim: [], + Shape: [], + Style: [], + }, + // 评价 + evaluate: { + rate: '100%', + star: 5, + tag: [{ + name: '价格实惠' + }], + }, + // 商品详情 + more: '', + // 购物车数目 + cartNumber: 0, + // skuList + skuList: [], + postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', +} + +const mutations = { + INIT: (state, { + goodInfo, + carousel, + goodsInfo, + Tag, + specification, + evaluate, + more, + skuList + }) => { + state.goodInfo = goodInfo + state.carousel = carousel + state.goodsInfo = goodsInfo + state.Tag = Tag + state.specification = specification + state.evaluate = evaluate + state.more = more + state.skuList = skuList + // state.current = 1 + }, + CART: (state, number) => { + state.cartNumber = number + }, + POST: (state, url) => { + state.postUrl = url + }, +} + +const actions = { + // 获取详情 + details({ + commit, + rootState + }, param) { + // console.log('paramparamparamparamparam', param); + return new Promise((resolve, reject) => request({ + url: read, + data: param, + success: ({ + data: { + data + } + }) => { + // console.log('======>>>>>>>>>>>>>>>>datadatadatadatadatadatadata<<<<<<<<<<<<<<<<<<<<<======', data) + // console.log('rootStaterootStaterootStaterootState', rootState.details) + const specification = rootState.details.specification == undefined ? [] : rootState + .details.specification; + specification[0].key = "frame_width"; + specification[0].slength = data.frame_width; + specification[1].key = "lens_width"; + specification[1].slength = data.lens_width; + specification[2].key = "glass_height"; + specification[2].slength = data.glass_height; + specification[3].key = "nose_width"; + specification[3].slength = data.nose_bridge; + specification[4].key = "leg_long"; + specification[4].slength = data.leg_temple; + specification[5].key = "weight"; + specification[5].slength = data.frame_weight; + + const parameter = { + frame_weight: data.frame_weight, + frame_width: data.frame_width, + glass_height: data.glass_height, + nose_width: data.nose_bridge, + lens_width: data.lens_width, + leg_long: data.leg_temple, + weight: data.frame_weight, + } + for (let index = 0; index < specification.length; index++) { + if (specification[index].key !== 'weight') { + specification[index].slength = `${parameter[specification[index].key]}mm` + } else { + if (parameter[specification[index].key] == 0) { + specification[index].slength = '未知重量' + } else { + specification[index].slength = `${parameter[specification[index].key]}克` + } + + } + } + + const Tag = data.tag_defined + if (Tag.Age == undefined || Tag.Age == null) { + Tag.Age = [] + } + console.log('TagTagTagTagTagTagTag=======', Tag); + commit('INIT', { + goodInfo: data, + skuList: data.sku, + carousel: data.sku[0].sku_pic_arr_http, + goodsInfo: { + name: data.shop_wood_name, + price: data.sales_price, + discountPrice: data.sales_price - Number(0), + tradeNumber: data.sales_num, + }, + Tag:Tag, + specification, + evaluate: { + rate: 5, + tag: data.judge.list, + // star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100), + star: 5, + }, + // eslint-disable-next-line + // more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), + more: data.shop_wood_desc_rich_text, + // current:1 + }) + resolve(data) + }, + fail: (res) => { + console.log('fail status ===>', res) + }, + })) + }, + // 获取购物车列表 + getCartNumber({ + commit + }, param) { + return new Promise((resolve) => request({ + url: cartList, + data: param, + success: ({ + data: { + data + } + }) => { + let number = 0 + for (let index = 0; index < data.length; index++) { + number += Number(data[index].num) + } + commit('CART', number) + }, + })) + }, + // 生成分享海报 + post({ + commit + }, param) { + return new Promise((resolve) => request({ + url: makePost, + data: param, + success: ({ + data + }) => { + commit('POST', data.data) + resolve() + }, + })) + }, +} + +export default { + namespaced: true, + state, + mutations, + actions, } diff --git a/src/store/modules/myLoveList.js b/src/store/modules/myLoveList.js index 0d54f92..cc2d707 100644 --- a/src/store/modules/myLoveList.js +++ b/src/store/modules/myLoveList.js @@ -29,18 +29,18 @@ const actions = { data: param, success: (res) => { // console.log(res.data); - commit('INIT', res.data.data) + commit('INIT', res.data.data.list) }, }) }, addMylove({ commit }, param) { - console.log('myloveupdate-parm====>', param) + // console.log('myloveupdate-parm====>', param) return new Promise((resolve) => request({ url: myloveadd, data: param, success: (res) => { console.log('addMylove-parm====>', param) - console.log(res.data) + // console.log(res.data) resolve(res.data) // commit("ADD", args); }, @@ -52,7 +52,7 @@ const actions = { data: param, success: (res) => { console.log('myloveupdate-parm====>', param) - console.log(res) + // console.log(res) // commit("UPDATE", param); }, }) diff --git a/src/store/modules/myOrder.js b/src/store/modules/myOrder.js index 8ebd659..cb58496 100644 --- a/src/store/modules/myOrder.js +++ b/src/store/modules/myOrder.js @@ -1,105 +1,111 @@ -import urlAlias from '../url'; -import request from '../request'; +import urlAlias from '../url'; +import request from '../request'; + +const { + myOrderList +} = urlAlias -const { - myOrderList -} = urlAlias - -// const data = { -// data: [ -// { -// finished_time: null, -// is_refound: "0", -// mch_id: "1436019502", -// money_of_dcw: "0", -// money_of_partner: "0", -// money_of_shop: "0", -// orderJudge: false, -// order_info: { -// address:{ -// cityName: "镇江市", -// countyName: "丹阳市", -// detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", -// errMsg: "chooseAddress:ok", -// nationalCode: "321181", -// postalCode: "212300", -// provinceName: "江苏省", -// telNumber: "15896379277", -// userName: "点餐汪客服", -// }, -// cartinfo:['11', '12'], -// keyname: "1_1587129366", -// lefttime: 179995, -// list:[ -// { -// cart_id: "11", -// imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", -// img_index_url: null, -// memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701", -// mp_id: "1", -// nowPrice: 100, -// num: "2", -// oldPrice: "0", -// p_discount: "1", -// p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", -// p_root_index: "1", -// p_sale_price: "0", -// peopleName: "me", -// pics: '', -// pid: "4", -// sk_id: "38", -// }, -// ], -// orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品", -// total_fee: 100 -// }, -// partner_uid: "0", -// pay_cate: "2020", -// pay_id: "3", -// pay_time: "2020-04-17 21:16:12", -// pay_wood_desc: "在【非常戴镜】的微信付款凭证", -// pay_wood_id: "fcdj-1-1_1587129366", -// prepay_id: "wx172116124528226bf1a8adad1662456500", -// re_check_staus: "0", -// shopid: "0", -// split_userid: "0", -// status: "1", -// total_fee: "100", -// uid: "1", -// } -// ], -// msg: "订单列表", -// status: 0, -// } - -const state = { - orderList: [], -}; - -const mutations = { - INIT: (state, data) => { - state.orderList = data; - }, -}; - -const actions = { - getList({ - commit - }, param) { - request({ - url: myOrderList, - data: param, - success: (res) => { - console.log('myOrderList', res.data); - commit("INIT", res.data.data); - }, - }) - } +/* +const data = { + data: [ + { + finished_time: null, + is_refound: "0", + mch_id: "1436019502", + money_of_dcw: "0", + money_of_partner: "0", + money_of_shop: "0", + orderJudge: false, + order_info: { + address:{ + cityName: "镇江市", + countyName: "丹阳市", + detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", + errMsg: "chooseAddress:ok", + nationalCode: "321181", + postalCode: "212300", + provinceName: "江苏省", + telNumber: "15896379277", + userName: "点餐汪客服", + }, + cartinfo:['11', '12'], + keyname: "1_1587129366", + lefttime: 179995, + list:[ + { + cart_id: "11", + imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", + img_index_url: null, + memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701", + mp_id: "1", + nowPrice: 100, + num: "2", + oldPrice: "0", + p_discount: "1", + p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", + p_root_index: "1", + p_sale_price: "0", + peopleName: "me", + pics: '', + pid: "4", + sk_id: "38", + }, + ], + orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品", + total_fee: 100 + }, + partner_uid: "0", + pay_cate: "2020", + pay_id: "3", + pay_time: "2020-04-17 21:16:12", + pay_wood_desc: "在【非常戴镜】的微信付款凭证", + pay_wood_id: "fcdj-1-1_1587129366", + prepay_id: "wx172116124528226bf1a8adad1662456500", + re_check_staus: "0", + shopid: "0", + split_userid: "0", + status: "1", + total_fee: "100", + uid: "1", + } + ], + msg: "订单列表", + status: 0, +} +*/ + +const state = { + orderList: [], +}; + +const mutations = { + INIT: (state, data) => { + state.orderList = data; + }, +}; + +const actions = { + getList({ + commit + }, param) { + request({ + url: myOrderList, + data: { + uid: 76, + order_status:200000 + }, + success: (res) => { + // console.log('myOrderList', res.data); + commit("INIT", res.data.data); + // commit(/"INIT", data); + }, + }) + } +} + +export default { + namespaced: true, + state, + mutations, + actions, } - -export default { - namespaced: true, - state, - mutations, - actions, -} \ No newline at end of file diff --git a/src/store/url.js b/src/store/url.js index 0b486b3..2a8a091 100644 --- a/src/store/url.js +++ b/src/store/url.js @@ -9,19 +9,19 @@ const urlAlias = { search: '/app/prod/search', // 首页搜索商品 // 登陆 - login: '/app/glass/getOpenId', // 登陆 - getUserInfo: '/app/glass/userinfo', // 获取用户信息 + login: '/api/frontend/glass/getOpenId', // 登陆 + getUserInfo: '/api/frontend/glass/userinfo', // 获取用户信息 // 我的订单 - orderList: '/app/order/list', // 获取订单列表 - myOrderList: '/app/order/list3', // 获取订单列表 - orderRead: '/app/order/read', // 获取订单详情 - cancelOrder: '/app/order/wait/del', // 取消订单 - statusConfirm: '/app/order/statusConfirm', // 订单操作 - payLog: '/app/pay/log', // 调起支付 - orderBuild: '/app/order/build', // 加购后生成订单 - buyNow: '/app/order/buynow', // 立即购买生成订单 - pay: '/app/pay/log', // 支付接口 + orderList: '/api/frontend/order/list', // 获取订单列表 + myOrderList: '/api/frontend/order/list', // 获取订单列表 + orderRead: '/api/frontend/order/read', // 获取订单详情 + cancelOrder: '/api/frontend/order/wait/del', // 取消订单 + statusConfirm: '/api/frontend/order/statusConfirm', // 订单操作 + payLog: '/api/frontend/pay/log', // 调起支付 + orderBuild: '/api/frontend/order/build', // 加购后生成订单 + buyNow: '/api/frontend/order/buynow', // 立即购买生成订单 + pay: '/api/frontend/pay/log', // 支付接口 // 购物车 cartList: '/api/frontend/cart/list', // 获取购物车列表 @@ -30,24 +30,25 @@ const urlAlias = { cartAdd: '/api/frontend/cart/add', // 添加购物车 // 我的 - recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 + recommandList: '/api/frontend/wood/recommand', // 获取用户个性化推荐商品 // 镜框选购页 - detailStandardList: '/app/prod/read', // 获取商品的详细信息 + detailStandardList: '/api/frontend/prod/read', // 获取商品的详细信息 // 选购页 - detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 - makePost: '/app/glass/makeProdAdvPic', // 生成分享海报 + detailStandardUrl: '/api/frontend/prod/read', // 获取商品的详细信息 + makePost: '/api/frontend/glass/makeProdAdvPic', // 生成分享海报 // 地址管理 - editAddress: '/app/address/edit_address', // 编辑地址 - addressList: '/app/address/get_address_list', // 获取用户地址列表 - getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 - getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 + editAddress: '/api/frontend/user/address/modi', // 编辑地址 + addAddress: '/api/frontend/user/address/add', // 添加地址 + addressList: '/api/frontend/user/address/list', // 获取用户地址列表 + getAddress: '/api/frontend/user/address/get', // 获取用户某一地址信息 + getDefaultAddress: '/api/frontend/user/address/get', // 获取用户默认地址信息 // 用户数据 - mylovelist: '/app/user/mylovelist', // 关心的人的数据 - myloveadd: '/app/user/myloveadd', // 添加关心的人 - myloveupdate: '/app/user/myloveupdate', // 更新关心人的数据 + mylovelist: '/api/frontend/user/mylovelist', // 关心的人的数据 + myloveadd: '/api/frontend/user/myloveadd', // 添加关心的人 + myloveupdate: '/api/frontend/user/myloveupdate', // 更新关心人的数据 } export default urlAlias -- 2.0.0