720 lines
16 KiB
Vue
720 lines
16 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
<!-- 收货地址 未添加地址 -->
|
||
<view class="area" @click="toArea" v-if="addList.length==0">
|
||
<view class="state">
|
||
<text>收货地址</text>
|
||
请添加收货人信息
|
||
</view>
|
||
<text class="iconfont icon-jiantou1"></text>
|
||
</view>
|
||
|
||
<!-- 收货地址 已添加地址 -->
|
||
<view class="head" v-else @click="toArea">
|
||
<view class="state"><text>收货地址</text></view>
|
||
<view class="name">{{addList[0].name}} {{addList[0].mobile_tm || addList[0].mobile}}</view>
|
||
<view class="choose_area">{{addList[0].region}}{{addList[0].detail_address}}</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="card">
|
||
<!-- 门店 -->
|
||
<view class="store">
|
||
<text class="iconfont icon-mendian"></text>
|
||
{{ previewList.store_name }}
|
||
</view>
|
||
|
||
<!-- 商品 -->
|
||
<!-- <u-checkbox-group @change="checkboxGroupChange"> -->
|
||
<view class="list" v-for="item in previewList.data">
|
||
<!-- <u-checkbox shape="circle" @change="checkboxChange(item)" v-model="item.checked"></u-checkbox> -->
|
||
|
||
<view class="img">
|
||
<image :src="item.image" mode=""></image>
|
||
</view>
|
||
<view class="it">
|
||
<view class="it_name">{{ item.drug_name }}</view>
|
||
<view class="it_info">{{ item.drug_name.usage }}</view>
|
||
<view class="it_price">
|
||
<text>{{ item.drugstore_drug.price }}</text>
|
||
<view class="it_num">
|
||
<uni-number-box :min="0" @change="changeNum($event, item)" :value="item.qty" disabled>
|
||
</uni-number-box>
|
||
</view>
|
||
<!-- <view class="it_num" v-if='qty'>
|
||
<uni-number-box :min="0" @change="changeNum($event, item)" :value="qty" disabled>
|
||
</uni-number-box>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- </u-checkbox-group> -->
|
||
<!-- 数量 -->
|
||
<view class="goods">
|
||
<view class="good_">
|
||
<text>商品总价</text>
|
||
<text class="price">￥{{ totalPrice }}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>快递费</text>
|
||
<text class="price">￥{{ Number(previewList.express_fee).toFixed(2) }}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>共{{totalCount}}件</text>
|
||
<view class="total">
|
||
合计:
|
||
<!-- <text
|
||
class="price">￥{{ (Number(totalPrice)+Number(previewList.express_fee==true?previewList.express_fee:'0')).toFixed(2) }}</text> -->
|
||
<text class="price">￥{{previewList.fee_total.toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 买家留言 -->
|
||
<view class="b-row" @click="toNext">
|
||
<text>买家留言</text>
|
||
<view class="info">选填：填写内容已和商家协商</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<view class="b-row">
|
||
<text>支付方式</text>
|
||
<view class="info">
|
||
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/shop/qian.png" mode=""></image>
|
||
微信
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="footer">
|
||
<text class="nums">共{{totalCount}}件</text>
|
||
<view class="total">
|
||
合计：
|
||
<!-- <text
|
||
class="price">￥{{(Number(totalPrice)+Number(previewList.is_free==true?previewList.express_fee:'0')).toFixed(2) }}</text> -->
|
||
<text class="price">￥{{previewList.fee_total.toFixed(2) }}</text>
|
||
|
||
</view>
|
||
|
||
<view class="to_btn" @click="toPay">提交订单</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
OrderPreview,
|
||
chooseAddress,
|
||
PayList,
|
||
getPayConfig,
|
||
drugFee,
|
||
addCart
|
||
|
||
} from '../../request/api/api';
|
||
export default {
|
||
data() {
|
||
return {
|
||
isshow: false,
|
||
allcheck: false,
|
||
value: 1,
|
||
numberValue: 0,
|
||
vModelValue: 3,
|
||
drug_id: '',
|
||
drug_ids: [],
|
||
cart_ids: [],
|
||
numbers:[],
|
||
previewList: {},
|
||
addList: [],
|
||
list: [{
|
||
checked: true,
|
||
disabled: false
|
||
}],
|
||
// numbers: '',
|
||
order_id: '',
|
||
base_express_fee: '', //基础运费,
|
||
free_express_fee: '', //免运费门槛
|
||
// qty:''
|
||
};
|
||
},
|
||
onLoad(op) {
|
||
console.log(op, 'op')
|
||
// console.log(JSON.parse(op.list),'opopp')
|
||
// this.listData=JSON.parse(op.list)
|
||
this.drug_ids = op.id
|
||
// this.qty=op.qty
|
||
if (op.list) {
|
||
this.drug_ids = JSON.parse(op.list).map(item => item.drug_id);
|
||
this.cart_ids = JSON.parse(op.list).map(item => item.id);
|
||
this.numbers = JSON.parse(op.list).map(item => item.numbers);
|
||
this.getOrderPreviewTopay()
|
||
}
|
||
this.getOrderPreview();
|
||
|
||
|
||
|
||
|
||
// this.getPay()
|
||
},
|
||
onShow() {
|
||
// uni.$on('addressList', function(data) {
|
||
// // console.log('监听到事件来自返回的参数：' + data);
|
||
// this.addList=data
|
||
// this.isshow=true
|
||
// console.log(this.addList);
|
||
// });
|
||
this.getDrugFee()
|
||
this.addList = uni.getStorageSync('addList')
|
||
this.isshow = true
|
||
},
|
||
computed: {
|
||
//全部价格
|
||
totalPrice: function() {
|
||
var totalPrice = 0;
|
||
// console.log(this.previewList.data)
|
||
if (!this.previewList.data) {
|
||
return totalPrice.toFixed(2);
|
||
}
|
||
// for (var i = 0; i < this.previewList.data.filter(item => item.checked).length; i++) {
|
||
// totalPrice += this.previewList.data[i].drugstore_drug.price * this.previewList.data[i].qty;
|
||
// }
|
||
for (var i = 0; i < this.previewList.data.length; i++) {
|
||
totalPrice += this.previewList.data[i].drugstore_drug.price * this.previewList.data[i].qty;
|
||
}
|
||
return totalPrice.toFixed(2);
|
||
},
|
||
//全部件数
|
||
|
||
totalCount: function() {
|
||
var totalCount = 0;
|
||
|
||
if (!this.previewList.data) {
|
||
return totalCount;
|
||
}
|
||
for (var i = 0; i < this.previewList.data.length; i++) {
|
||
totalCount += this.previewList.data[i].qty;
|
||
}
|
||
return totalCount;
|
||
}
|
||
},
|
||
methods: {
|
||
changeValue(value) {
|
||
console.log('返回数值：', value);
|
||
},
|
||
// 选中某个复选框时，由checkbox时触发
|
||
checkboxChange(item) {
|
||
console.log(item);
|
||
// item.checked = !item.checked
|
||
// if (this.cartLists.valid.filter(e => !e.checked).length) {
|
||
// this.checked = false
|
||
|
||
// } else {
|
||
// this.checked = true
|
||
// }
|
||
},
|
||
// 选中任一checkbox时，由checkbox-group触发
|
||
checkboxGroupChange(e) {
|
||
// console.log(e);
|
||
},
|
||
// 添加地址
|
||
toArea() {
|
||
uni.getStorageSync('addList')
|
||
uni.navigateTo({
|
||
url: '/subPackages/setup/area-list?type=' + 1
|
||
});
|
||
},
|
||
// 支付
|
||
toPay() {
|
||
// uni.navigateTo({
|
||
// url: '/subPackages/shop/paied?id='
|
||
// });
|
||
this.getPay()
|
||
},
|
||
// 买家留言
|
||
toNext() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/shop/written?id='
|
||
});
|
||
},
|
||
//加减法
|
||
changeNum(e, current) {
|
||
console.log(e, current);
|
||
this.previewList.data.forEach(item => {
|
||
if (item.id == current.id) {
|
||
item.qty = e;
|
||
}
|
||
});
|
||
|
||
console.log(e, 77);
|
||
this.numbers = e
|
||
|
||
// this.previewList.data.qty=value
|
||
// this.cartLists.valid[1].qty=value
|
||
},
|
||
//请求
|
||
getOrderPreview() {
|
||
OrderPreview({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
drug_ids: [...this.drug_ids],
|
||
cart_ids: [...this.cart_ids],
|
||
numbers:[...this.numbers]
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, 'list');
|
||
if (res.data.code == 0) {
|
||
console.log(res.data.data);
|
||
this.previewList = res.data.data;
|
||
this.numbers = this.previewList.data.map(item => item.qty)
|
||
}
|
||
}).catch(err => console.log(err, 'err'));
|
||
},
|
||
|
||
|
||
//立即购买
|
||
getOrderPreviewTopay() {
|
||
OrderPreview({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
drug_ids: this.drug_id,
|
||
cart_ids: ''
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, 'list');
|
||
if (res.data.code == 0) {
|
||
this.previewList = res.data.data;
|
||
this.numbers = this.previewList.data.map(item => item.qty)
|
||
console.log(res.data.data);
|
||
|
||
}
|
||
});
|
||
},
|
||
// drugFee
|
||
getDrugFee() {
|
||
drugFee({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, 'list');
|
||
if (res.data.code == 0) {
|
||
console.log(res.data);
|
||
this.base_express_fee = res.data.data.base_express_fee
|
||
this.free_express_fee = res.data.data.free_express_fee
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
getPay() {
|
||
PayList({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
drug_ids: [...this.drug_ids],
|
||
cart_ids: [...this.cart_ids],
|
||
address_id: this.addList[0].id,
|
||
numbers:[...this.numbers]
|
||
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, 'list');
|
||
if (res.data.code == 0) {
|
||
console.log(res.data.data.order_no);
|
||
this.order_id = res.data.data.order_id
|
||
uni.setStorageSync('order_no', res.data.data.order_no)
|
||
this.getPayConfig()
|
||
// this.previewList = res.data.data;
|
||
}
|
||
});
|
||
},
|
||
getPayConfig() {
|
||
getPayConfig({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
order_id: this.order_id
|
||
}
|
||
}).then(res => {
|
||
console.log(res, 'list');
|
||
if (res.data.code == 0) {
|
||
// console.log(res.data.data.order_no);
|
||
console.log(res.data.data.appId);
|
||
|
||
|
||
|
||
|
||
uni.requestPayment({
|
||
// provider: 'wxpay',
|
||
appId: res.data.data.appId,
|
||
timeStamp: res.data.data.timeStamp,
|
||
nonceStr: res.data.data.nonceStr,
|
||
package: res.data.data.package,
|
||
signType: res.data.data.signType,
|
||
paySign: res.data.data.paySign,
|
||
success: (res) => {
|
||
console.log('success:' + JSON.stringify(res));
|
||
setTimeout(() => {
|
||
|
||
uni.navigateTo({
|
||
url: '/subPackages/shop/paied'
|
||
})
|
||
uni.hideLoading();
|
||
}, 300)
|
||
},
|
||
fail: function(err) {
|
||
console.log('fail:' + JSON.stringify(err));
|
||
// console.log(res.data.data.timestamp,666)
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
duration: 1500,
|
||
mask: false,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// let data = JSON.parse(res.data.data)
|
||
// let appId = data.appId;
|
||
// let timeStamp = data.timeStamp;
|
||
// let nonceStr = data.nonceStr;
|
||
// let packageX = data.package;
|
||
// let signType = data.signType;
|
||
// let paySign = data.paySign;
|
||
|
||
|
||
|
||
// uni.requestPayment({
|
||
// provider: 'wxpay', //支付类型
|
||
// appId: appId, //小程序Appid
|
||
// timeStamp: timeStamp, //创建订单时间戳
|
||
// nonceStr: nonceStr,
|
||
// package: packageX, // 订单包
|
||
// signType: signType, // 加密方式统一'MD5'
|
||
// paySign: paySign,
|
||
// success: function(res) {
|
||
// console.log('支付成功', res);
|
||
// // 业务逻辑。。。
|
||
// },
|
||
// fail: function(err) {
|
||
// console.log('支付失败', err);
|
||
// }
|
||
// });
|
||
|
||
|
||
|
||
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 750rpx;
|
||
max-height: 100%;
|
||
min-height: 100vh;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background: #f5f5f5;
|
||
|
||
.area {
|
||
width: 750rpx;
|
||
height: 168rpx;
|
||
margin: 20rpx auto;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 0rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 116rpx;
|
||
height: 38rpx;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
background: #1777ff;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.head {
|
||
width: 750rpx;
|
||
height: 168rpx;
|
||
margin: 20rpx auto;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 0rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 116rpx;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
background: #1777ff;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
margin: 10rpx 0;
|
||
}
|
||
|
||
.choose_area {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 750rpx;
|
||
margin: 0 auto;
|
||
padding: 20rpx 12rpx 20rpx 20rpx;
|
||
background: #ffffff;
|
||
|
||
.store {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 500;
|
||
color: #232323;
|
||
margin-left: 20rpx;
|
||
|
||
.iconfont {
|
||
font-size: 39rpx;
|
||
color: #666666;
|
||
vertical-align: middle;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
height: 254rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.checkbox {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
background: #1777ff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 10rpx;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.it {
|
||
flex: 1;
|
||
padding: 16rpx 10rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
|
||
.it_name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.it_info {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin: 20rpx 0 48rpx 10rpx;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.it_price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.good_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.total {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
.price {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.b-row {
|
||
width: 750rpx;
|
||
height: 120rpx;
|
||
margin: 20rpx auto;
|
||
padding: 0 40rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.info {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
vertical-align: middle;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 104rpx;
|
||
background: #fff;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: env(safe-area-inset-bottom);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding: 0 24rpx;
|
||
|
||
.nums {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.total {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
margin: 0 16rpx;
|
||
|
||
.price {
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #4175ee;
|
||
}
|
||
}
|
||
|
||
.to_btn {
|
||
width: 196rpx;
|
||
height: 64rpx;
|
||
border-radius: 64rpx;
|
||
text-align: center;
|
||
line-height: 62rpx;
|
||
background: #4175ee;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|