247 lines
6.9 KiB
Vue
247 lines
6.9 KiB
Vue
<template>
|
||
<view class="p30">
|
||
<view style="height: 20rpx"></view>
|
||
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex">
|
||
<image style="width: 220rpx; height: 220rpx; border-radius: 16rpx" :src="shop.cover" mode="aspectFill"></image>
|
||
<view style="padding: 20rpx">
|
||
<view style="color: #232323">{{ shop.name }}</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view>
|
||
<text>单价：</text>
|
||
<text style="color: crimson">{{ shop.currentPrice }}元</text>
|
||
</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view>
|
||
<text>总价：</text>
|
||
<text style="color: crimson">{{ shop.currentPrice * dataFrom.num }}元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex; align-items: center; justify-content: space-between">
|
||
<view class="u-flex">
|
||
<view>购买数量</view>
|
||
<view style="width: 10rpx"></view>
|
||
</view>
|
||
<view><up-number-box v-model="dataFrom.num" inputWidth="100rpx" @change="changenum"></up-number-box></view>
|
||
</view>
|
||
|
||
<!-- <view
|
||
@click="toAddress"
|
||
v-if="shop.purposeType != 1"
|
||
style="
|
||
background-color: #ffffff;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
"
|
||
>
|
||
<view class="u-flex" v-if="!addData">
|
||
<view>请先选择收货地址</view>
|
||
</view>
|
||
|
||
<view class="address-a" v-else @click="toAddress">
|
||
<view class="top">
|
||
<view class="top-a">
|
||
<view>{{ addData.realName }}</view>
|
||
<view>{{ addData.phone }}</view>
|
||
</view>
|
||
<view class="top-b">{{ addData.province }} {{ addData.city }} {{ addData.district }} {{ addData.detail }}</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view
|
||
style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx"
|
||
v-if="shop.purposeType == 2 || (shop.purposeType == 3 && shop.salePrice == 2980)"
|
||
>
|
||
<view style="font-weight: 700">温馨提示：{{ shop.purposeType == 2 ? `满${shop.itemType == 7 ? '20' : shop.itemType == 20 ? '5' : ''}台包安装` : '' }}</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view>套包安装内容仅限50米，实际电缆小于50米的以实际安装必要长度为准，差值米数不以任何形式赠送或返还;超出50米的，超出部分按100元/米补足超出的费用。</view>
|
||
</view> -->
|
||
|
||
<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx">
|
||
<view style="font-weight: 700">购买须知：</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view style="color: #dd6161">付款成功后立即生效，并投入生产安装，不支持退款、退货。</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<view style="display: flex">
|
||
<view>阅读并同意:</view>
|
||
<navigator url="/pages/protocol/buy?id=14" style="color: dodgerblue" open-type="navigate">
|
||
<text>《充电桩购销合同》</text>
|
||
</navigator>
|
||
</view>
|
||
<view>
|
||
<up-text v-if="policy.is_buy == 1" text="已同意" type="primary"></up-text>
|
||
<up-text v-else text="未同意" type="error"></up-text>
|
||
</view>
|
||
</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<view style="display: flex">
|
||
<view>阅读并同意:</view>
|
||
<navigator url="/pages/protocol/trusteeship?id=13" style="color: dodgerblue" open-type="navigate">
|
||
<text>《充电桩托管协议》</text>
|
||
</navigator>
|
||
</view>
|
||
<view>
|
||
<up-text v-if="policy.is_trusteeship == 1" text="已同意" type="primary"></up-text>
|
||
<up-text v-else text="未同意" type="error"></up-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex; justify-content: center; margin-top: 80rpx">
|
||
<view class="affirm_btn" @click="add">确认订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { addGoodsOrders } from '@/api/api.js';
|
||
import { shopInfo } from '@/api/api.js';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
let dataFrom = ref({
|
||
num: 1
|
||
});
|
||
let shop = ref({});
|
||
let policy = ref({
|
||
is_trusteeship: 0,
|
||
is_buy: 0
|
||
});
|
||
|
||
let address = ref({});
|
||
let addData = ref(null);
|
||
|
||
let typeTrue = computed(() => {
|
||
var a = false;
|
||
if (
|
||
(shop.value.purposeType == 2 && dataFrom.value.num == 20 && shop.value.itemType == 7) ||
|
||
(shop.value.purposeType == 2 && dataFrom.value.num == 5 && shop.value.itemType == 20)
|
||
) {
|
||
a = true;
|
||
}
|
||
return a;
|
||
});
|
||
|
||
onLoad(async (options) => {
|
||
let _res = await shopInfo({
|
||
goodId: options.id
|
||
});
|
||
shop.value = _res;
|
||
|
||
uni.$on('buy', (e) => {
|
||
policy.value.is_buy = e;
|
||
});
|
||
uni.$on('trusteeship', (e) => {
|
||
policy.value.is_trusteeship = e;
|
||
});
|
||
|
||
uni.$on('address', (e) => {
|
||
addData.value = e;
|
||
address.value = {
|
||
takeName: e.realName,
|
||
takePhone: e.phone,
|
||
takeAddress: `${e.province}${e.city}${e.district}${e.detail}`
|
||
};
|
||
});
|
||
});
|
||
|
||
let changenum = (e) => {
|
||
console.log(e);
|
||
};
|
||
|
||
let toAddress = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/address/list?type=1'
|
||
});
|
||
};
|
||
|
||
let add = async () => {
|
||
// if (!address.value.takeName && shop.value.purposeType != 1) return uni.showToast({ title: '请先选择收货地址', icon: 'none' });
|
||
if (!policy.value.is_buy) return uni.showToast({ title: '请阅读并同意《充电桩购销合同》', icon: 'none' });
|
||
if (!policy.value.is_trusteeship) return uni.showToast({ title: '请阅读并同意《充电桩托管协议》', icon: 'none' });
|
||
let _res = await addGoodsOrders({
|
||
num: dataFrom.value.num,
|
||
goodsId: shop.value.id
|
||
// ...address.value
|
||
});
|
||
uni.redirectTo({
|
||
url: `/pageInvest/shop/pay?id=${_res.id}&amount=${_res.payMoney}&type=1&num=${_res.num}&goodsId=${shop.value.id}`
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.affirm_btn {
|
||
width: 650rpx;
|
||
height: 78rpx;
|
||
background: #4874e5;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.address-a {
|
||
.top {
|
||
padding: 40rpx;
|
||
|
||
.top-a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
margin-bottom: 45rpx;
|
||
}
|
||
|
||
.top-b {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
padding: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bottom-che {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
}
|
||
|
||
.bottom-r {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|