H5端齐采药项目,uniapp框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

533 lines
12 KiB

<template>
<page-meta :page-style="themeColor"></page-meta>
<view>
<view class="head-shwen df jcsa"><!-- 商品将在七天内发货 --></view>
<view class="head">
<view class="head-dizi df" @click="selectAddress" v-if="data.type==1">
<div class="dizi-one">
<image :src="$util.img('upload/weapp/pageSalesman/reportForm/position.png')"></image>
</div>
<div class="df fdc">
<div class="dizi-sui">
{{ addressData.name }}
<span>{{ addressData.mobile }}</span>
</div>
<div class="dizi-two">
{{ addressData.full_address ? addressData.full_address : '' }}
{{ addressData.address ? addressData.address : '' }}
</div>
</div>
<div class="dizi-for df aic" v-if="data.type==1">
<image :src="$util.img('upload/weapp/user/you.png')"></image>
</div>
</view>
<view class="cais" v-if="data.type==1">
<image :src="$util.img('upload/weapp/pageSalesman/reportForm/bar.png')"></image>
</view>
<view class="list">
<div class=" df">
<div style="margin-right: 30rpx;">
<image :src="$util.img(data.image)" mode="aspectFill"></image>
</div>
<div class="df fdc">
<div class="name">{{ data.name }}</div>
<div v-if="data.type == 2">
<div class="price">{{ data.point }}积分</div>
</div>
<div v-if="data.type == 1" style="display: flex;">
<div class="price">{{ data.point }}积分+{{ data.price }}元</div>
</div>
<div class="df jcsb wbf">
<div class="one">×{{ pointNum }}</div>
<div class="sex">
{{ pointNum * data.point }}积分
<span v-if="Number(data.price)">
+¥{{ pointNum * Number(data.price) }}元
</span>
</div>
</div>
</div>
</div>
</view>
<view class="zonjia df">
<div class="f1">
<div class="df jcsb">
<div class="zonj">商品总价</div>
<div class="qiam" style="color: #222222;">
<div v-if="data.type == 2">
<div>{{ pointNum * data.point }}积分</div>
</div>
<div v-if="data.type == 1" style="display: flex;">
<div>
{{ pointNum * data.point }}积分
<span v-if="Number(data.price)">
+¥{{ pointNum * Number(data.price) }}元
</span>
</div>
</div>
</div>
</div>
<div class="df jcsb" v-if="Number(data.delivery_price)">
<div class="zonj">运费</div>
<div class="qiam" style="color: red;">¥{{ data.delivery_price }}</div>
</div>
<!-- <div class="df jcsb">
<div class="zonj">优惠卷</div>
<div class="qiam" style="color: red;">-¥6.00</div>
</div> -->
<div class="df jcsb">
<div class="zonj">需付款</div>
<div class="qiam" style="color: #222222;">
<div class="qiam" style="color: #222222;">
<div v-if="data.type == 2">
<div>{{ pointNum * data.point }}积分</div>
</div>
<div v-if="data.type == 1" style="display: flex;">
<div>
{{ pointNum * data.point }}积分
<span v-if="Number(data.price) || Number(data.delivery_price)">
+¥{{
pointNum * Number(data.price) +
Number(data.delivery_price)
}}元
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</view>
</view>
<view class="order-submit bottom-safe-area">
<view class="order-settlement-info">
<text class="font-size-base">
合计:{{ pointNum * data.point }}积分
<text v-if="Number(data.price)">+¥{{ pointNum * Number(data.price) }}元</text>
</text>
</view>
<view class="submitBtn" @click="createPoint()">
提交订单
<!-- <u-button type="primary" size="mini" @click="createPoint()">提交订单</u-button> -->
</view>
</view>
</view>
</template>
<script>
// import { number } from 'echarts';
// import { data } from 'uview-ui/libs/mixin/mixin';
import { mapGetters } from 'vuex';
export default {
data() {
return {
index: '',
data: {},
routeObj: {},
pointNum: 0,
id: undefined,
addressData: {}
};
},
onLoad(option) {
this.routeObj = option;
this.pointNum = this.routeObj.pointNum;
this.id = this.routeObj.id;
},
onShow() {
this.init();
},
computed: {
...mapGetters(['userInfo'])
},
methods: {
init() {
this.getPointGoods(this.id);
this.getDefalutAddress();
},
// 获取积分商品详情
getPointGoods(id) {
this.$api.sendRequest({
url: '/api/goodsexchange/detail',
data: {
id
},
success: res => {
console.log(res.data, 'getPointGoods');
this.data = res.data;
}
});
},
// 获取默认收货地址
getDefalutAddress() {
this.$api.sendRequest({
url: '/api/memberaddress/page',
data: {
member_id: this.userInfo.member_id
},
success: res => {
res.data.list.forEach(item => {
if (item.is_default) {
this.addressData = item;
}
});
}
});
},
// 选择收货地址
selectAddress() {
var params = {
back: this.$util.getCurrentRoute().path,
local: 0,
type: 1,
id: this.routeObj.id,
typeName: 'pointChange'
// pointNum: this.routeObj.pointNum
};
console.log(this.$util.getCurrentRoute().path);
this.$util.redirectTo('/pages_tool/member/address', params);
},
createPoint() {
let data = {
goods_id: this.data.id,
num: Number(this.pointNum),
store_id: uni.getStorageSync('myStore').id,
member_address: JSON.stringify(this.addressData)
};
if (this.data.type == 2) {
data.member_address = null;
}
this.$api.sendRequest({
url: '/api/goodsexchange/doExchange',
data,
success: res => {
this.$util.showToast({
title: '兑换成功'
});
console.log(res);
uni.navigateTo({
url: '/pages_tool/member/exchange_record'
});
}
});
console.log(data);
},
btn() {
this.$util.showToast({
title: '已告知商家尽快发货'
});
},
qudwl() {
this.$util.showToast({
title: '确认收货成功'
});
}
}
};
</script>
<style lang="scss">
@import '@/common/css/order_parment.scss';
</style>
<style lang="scss">
.head-shwen {
width: 100%;
height: 150rpx;
background-image: linear-gradient(rgb(33, 187, 243), rgb(247, 247, 247));
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 40rpx;
}
.head {
padding: 0 24rpx;
box-sizing: border-box;
position: relative;
top: -40rpx;
.head-dizi {
width: 100%;
height: 172rpx;
background: #ffffff;
border-radius: 16rpx;
padding: 0 24rpx;
box-sizing: border-box;
.dizi-one {
image {
width: 44rpx;
height: 44rpx;
margin-top: 34rpx;
margin-right: 8rpx;
}
}
.fdc {
width: 80%;
.dizi-two {
width: 100%;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 48rpx;
margin-top: 8rpx;
}
.dizi-sui {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 44rpx;
margin-top: 32rpx;
span {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 44rpx;
margin-left: 16rpx;
}
}
}
.dizi-for {
image {
width: 28rpx;
height: 28rpx;
margin-left: 60rpx;
}
}
}
.cais {
position: relative;
top: -28rpx;
image {
width: 100%;
height: 6rpx;
}
}
.list {
width: 702rpx;
background: #ffffff;
border-radius: 16rpx;
padding: 0 32rpx;
box-sizing: border-box;
padding-bottom: 32rpx;
image {
width: 160rpx;
height: 160rpx;
margin-top: 32rpx;
}
.qaun {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-top: 24rpx;
image {
width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
}
}
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-top: 32rpx;
}
.price {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: $base-color;
}
.wbf {
width: 450rpx;
margin-top: 50rpx;
.one {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
}
.sex {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #222222;
line-height: 40rpx;
}
}
}
.dinkdn {
width: 702rpx;
background: #ffffff;
border-radius: 16rpx;
padding: 8rpx 32rpx 32rpx 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.dindan {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-top: 32rpx;
span {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 48rpx;
}
}
.fuzhi {
width: 96rpx;
height: 48rpx;
background: #ffffff;
border-radius: 28rpx;
border: 2rpx solid #e8e8e8;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 34rpx;
margin-top: 28rpx;
}
}
.zonjia {
padding: 8rpx 32rpx 32rpx 32rpx;
width: 702rpx;
background: #ffffff;
border-radius: 16rpx;
margin-top: 24rpx;
box-sizing: border-box;
.zonj {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-top: 24rpx;
}
.qiam {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
line-height: 40rpx;
margin-top: 24rpx;
}
.img {
image {
width: 28rpx;
height: 28rpx;
}
}
}
}
.btn {
width: 750rpx;
height: 100rpx;
background: #ffffff;
margin-top: 24rpx;
.btn-tixin {
width: 192rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #e8e8e8;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-right: 32rpx;
}
.btn-one {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
width: 192rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #e8e8e8;
}
.btn-two {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
width: 192rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #e8e8e8;
margin: 0 24rpx;
}
.btn-sui {
width: 192rpx;
height: 72rpx;
background: $base-color;
border-radius: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 40rpx;
margin-right: 24rpx;
}
}
.submitBtn {
line-height: 70rpx;
text-align: center;
width: 180rpx;
height: 70rpx;
padding: 0;
font-size: $font-size-base;
font-weight: bold;
background: $base-color;
border-radius: 50rpx;
margin-right: 30rpx;
}
</style>