369 lines
12 KiB
Vue
369 lines
12 KiB
Vue
<template>
|
|
<div class="gift">
|
|
<div class="logo_box">
|
|
<img src="/img/b_logo.png" alt="">
|
|
</div>
|
|
<div class="gift_box">
|
|
<img class="tit_icon" src="/img/gift_title.png" alt="">
|
|
<img style="width: 81.33vw;margin-top: 8vw;" src="/img/gift_qy.png" alt="">
|
|
|
|
<!-- <div class="big_box"> -->
|
|
<div class="choose">
|
|
<img class="choose_img" :src="selected.id ? $file(selected.img) : '/img/gift_i1.png'">
|
|
<div class="choose_box">
|
|
<span class="title">
|
|
{{ selected.id ? selected.name : '泰古润报单礼包' }}
|
|
</span>
|
|
<div>
|
|
<img class="choose_icon" src="/img/fire.png" alt="">
|
|
<b>购买即可升级VIP</b>
|
|
</div>
|
|
<div class="choose_item" @click="showSelect = true">
|
|
<div class="btn1" v-if="selected.id">
|
|
<span>
|
|
￥<b>{{ selected.saleprice }}</b>
|
|
</span>
|
|
</div>
|
|
<div class="btn1" v-else>
|
|
<span>
|
|
<span style="font-size: 4vw;padding: 0 3vw;">待选</span>
|
|
</span>
|
|
</div>
|
|
<div class="btn2">
|
|
<span>
|
|
选择产品礼包
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- v-if="selected.id" -->
|
|
<div class="detail">
|
|
<!-- <div>
|
|
<span class="title">
|
|
购买产品数量
|
|
</span>
|
|
<span class="r">
|
|
<van-stepper v-model="value" />
|
|
</span>
|
|
</div> -->
|
|
<div>
|
|
<span class="title">
|
|
赠送积分
|
|
</span>
|
|
<b class="r"> 1980.00
|
|
<!-- {{
|
|
// (selected.saleprice * value || 0)?.toFixed(2)
|
|
|
|
}} -->
|
|
</b>
|
|
</div>
|
|
<div>
|
|
<span class="title">
|
|
赠送会员卡额度
|
|
</span>
|
|
<b class="r">
|
|
<!-- {{ (Number(selected.gongxianzhi) || 0)?.toFixed(2) }} -->
|
|
<span>￥</span> 6000.00
|
|
</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="address">
|
|
<!-- <div class="input">
|
|
<div class="img">
|
|
<img src="/img/gift_i2.png" alt="">
|
|
</div>
|
|
<van-field v-model="address.username" placeholder="请填写报单人账号" type="phone"
|
|
:rules="[{ required: true, message: '请填写报单人账号' }]" />
|
|
</div> -->
|
|
<div class="input">
|
|
<div class="img">
|
|
<img src="/img/gift_i3.png" alt="">
|
|
</div>
|
|
<van-field v-model="address.ReceiveName" placeholder="请填写收货人姓名"
|
|
:rules="[{ required: true, message: '请填写收货人姓名' }]" />
|
|
<button class="btn" @click="$refs.ad_selector.showSelector()">
|
|
导入已有地址
|
|
</button>
|
|
</div>
|
|
<div class="input">
|
|
<div class="img">
|
|
<img src="/img/gift_i4.png" alt="">
|
|
</div>
|
|
<van-field v-model="address.ReceivePhone" placeholder="请填写收货人电话" type="phone"
|
|
:rules="[{ required: true, message: '请填写收货人电话' }]" />
|
|
</div>
|
|
<div class="input">
|
|
<div class="img">
|
|
<img src="/img/gift_i5.png" alt="">
|
|
</div>
|
|
<van-field v-model="address.ReceiveRegionName" placeholder="请选择 / 省市 / 县" is-link
|
|
:rules="[{ required: true, message: '请选择 / 省市 / 县' }]" @click="showRegion = true" />
|
|
</div>
|
|
<div class="input">
|
|
<div class="img">
|
|
</div>
|
|
<van-field v-model="address.ReceiveAddress" placeholder="请填写收货人详细地址"
|
|
:rules="[{ required: true, message: '请填写收货人详细地址' }]" />
|
|
</div>
|
|
<div class="input">
|
|
<div class="img">
|
|
<img src="/img/gift_i6.png" alt="">
|
|
</div>
|
|
<van-field v-model="address.Remark" placeholder="备注选填，请先与商家协商一致" />
|
|
</div>
|
|
</div>
|
|
|
|
<button class="commit" @click="onShow()">
|
|
立即购买
|
|
</button>
|
|
|
|
<span class="toList" @click="$navigate('TradeList?TradeArea=1')">
|
|
购买记录
|
|
</span>
|
|
|
|
<!-- <van-checkbox icon-size="2.667vw" class="agreement" v-model="checked" checked-color="#85cb58">
|
|
已阅读并同意<a @click.stop="showContract = true">《保供臻选商务权益礼包电子协议》</a>
|
|
</van-checkbox> -->
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
|
|
<van-action-sheet v-model:show="showSelect" class="popup-tuoke" safe-area-inset-bottom title=" " closeable
|
|
style="padding: 0 0 0; min-height: 60%">
|
|
<div class="s_select" style="padding-bottom: 13.333vw;">
|
|
<div class="t" style="justify-content: center; align-items: center;">
|
|
<img src="/img/s_select-cart.png" />
|
|
<div style="flex-direction: column; line-height: 6.667vw; align-items: flex-start;">
|
|
<div style="line-height: 10.267vw;">
|
|
请选择礼包产品
|
|
</div>
|
|
<b style="color: #f00;font-size: 3.2vw;">
|
|
礼包产品一经售出概不退还
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<div class="l" style="height: 85vw">
|
|
<van-radio-group v-model="active">
|
|
<van-cell-group>
|
|
<BaseList class="mall-list" ref="BaseList" url="/v1/client/EProsClient" :params="searchParams">
|
|
<template #default="{ item }">
|
|
<van-cell clickable @click="selecting = item; active = item.id">
|
|
<template #icon>
|
|
<van-radio checked-color="#19954d" :name="item.id" />
|
|
</template>
|
|
<template #title>
|
|
<div class="list">
|
|
<img :src="$file(item.img)" />
|
|
<div style="width:59vw;">
|
|
<div class="name">
|
|
<b>{{ item.name }}</b>
|
|
<div class="text">
|
|
{{ item.skuname }}
|
|
<b style="line-height: 5.6vw;">
|
|
<span><span>￥</span>{{ item.saleprice }}</span>
|
|
<!-- <span> /{{ item.skuname }}</span> -->
|
|
<a @click.stop="onShowDetail(item)" style="float: right">
|
|
查看详情
|
|
</a>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</template>
|
|
</BaseList>
|
|
</van-cell-group>
|
|
</van-radio-group>
|
|
</div>
|
|
</div>
|
|
<van-action-bar safe-area-inset-bottom style="border-top: solid 1px #f1f1f1;">
|
|
<van-action-bar-button color="#ca2904" :disabled="active == 0" text="确 定"
|
|
@click="onSelectGoods"></van-action-bar-button>
|
|
</van-action-bar>
|
|
</van-action-sheet>
|
|
|
|
<AddressSelector ref="ad_selector" @confirm="onAddressConfirm" />
|
|
|
|
<!-- <van-popup v-model:show="showRegion" round position="bottom">
|
|
<van-cascader v-model="region" title="请选择地区" :options="options" :field-names="defaultProps" @change="onChange"
|
|
@finish="onFinish" @close="showRegion = false" />
|
|
</van-popup> -->
|
|
|
|
<van-popup v-model:show="showRegion" round position="bottom">
|
|
<van-cascader v-model="region" title="请选择地区" :options="options" @close="showRegion = false" @finish="onFinish" />
|
|
</van-popup>
|
|
|
|
|
|
<!-- <BasePwd v-model:show="showPayPwd" :title="`交易密码`" @val="submitOrder" /> -->
|
|
|
|
<van-action-sheet v-model:show="showDetail" title="权益详情" style="min-height: 60vh;padding: 3.333vw;">
|
|
<div class="w100" v-html="data.SpuDetail"></div>
|
|
</van-action-sheet>
|
|
|
|
<van-action-sheet v-model:show="showContract" safe-area-inset-bottom title="保供臻选商务权益礼包电子协议" closeable
|
|
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
|
<div class="w100 html">
|
|
<p>用户协议内容...</p>
|
|
<p>这里是用户协议的详细条款...</p>
|
|
</div>
|
|
</van-action-sheet>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { useCascaderAreaData } from '@vant/area-data';
|
|
|
|
export default {
|
|
name: 'Gift',
|
|
activated() {
|
|
this.init();
|
|
},
|
|
mounted() {
|
|
this.config = { FruitPrice: 10 };
|
|
this.options = useCascaderAreaData();
|
|
},
|
|
data() {
|
|
return {
|
|
data: {},
|
|
active: 0,
|
|
checked: false,
|
|
showContract: false,
|
|
selecting: {},
|
|
selected: {},
|
|
config: {},
|
|
value: 1,
|
|
searchParams: {
|
|
mallstate: 1,
|
|
},
|
|
address: {},
|
|
showSelect: false,
|
|
showRegion: false,
|
|
region: '',
|
|
options: [],
|
|
defaultProps: {
|
|
value: "id",
|
|
text: "name",
|
|
},
|
|
showPayPwd: false,
|
|
showDetail: false,
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
Promise.all([])
|
|
},
|
|
onAddressConfirm(address) {
|
|
this.address.ReceiveName = address.ReceiveName;
|
|
this.address.ReceivePhone = address.ReceivePhone;
|
|
this.address.ReceiveRegionName = address.ReceiveRegionName;
|
|
this.address.city = address.city;
|
|
this.address.province = address.province;
|
|
this.address.county = address.county;
|
|
this.address.ReceiveAddress = address.ReceiveAddress;
|
|
},
|
|
onShow() {
|
|
if (!this.$valid(this.selected.id, '请选择礼包产品'))
|
|
return;
|
|
if (!this.$valid(this.address.ReceivePhone, '请输入收货人电话'))
|
|
return;
|
|
if (!this.$valid(this.address.ReceiveName, '请输入收货人姓名'))
|
|
return;
|
|
if (!this.$valid(this.address.ReceiveRegionName, '请选择省市县'))
|
|
return;
|
|
if (!this.$valid(this.address.ReceiveAddress, '请输入详细地址'))
|
|
return;
|
|
// if (!this.checked) {
|
|
// this.$showFailToast('请同意协议');
|
|
// return;
|
|
// }
|
|
this.submitOrder();
|
|
},
|
|
onShowDetail(e) {
|
|
this.data.SpuDetail = e.SpuDetail;
|
|
this.showDetail = true;
|
|
},
|
|
onRefresh() {
|
|
this.$refs.BaseList.refresh()
|
|
},
|
|
loadData(e) {
|
|
this.data.Level = e.total.Level;
|
|
this.data.LevelName = this.toChinese(e.total.Level);
|
|
},
|
|
onSelectGoods() {
|
|
this.selected = this.selecting;
|
|
this.showSelect = false;
|
|
},
|
|
// onChange(e) {
|
|
// if (e.selectedOptions[e.tabIndex].leaf) {
|
|
// e.selectedOptions[e.tabIndex].children = null;
|
|
// this.showRegion = false;
|
|
// return;
|
|
// }
|
|
// else if (!e.selectedOptions[e.tabIndex].children || e.selectedOptions[e.tabIndex].children.length == 0) {
|
|
// this.$CommonAPI.Post('GetRegions', e.value).then(data => {
|
|
// if (data.length > 0) {
|
|
// data.forEach(x => { x.children = [] });
|
|
// e.selectedOptions[e.tabIndex].children = data;
|
|
// }
|
|
// else {
|
|
// e.selectedOptions[e.tabIndex].children = null;
|
|
// this.showRegion = false;
|
|
// }
|
|
// });
|
|
// }
|
|
// },
|
|
onFinish(e) {
|
|
this.showRegion = false;
|
|
// console.log(e);
|
|
|
|
this.address.ReceiveRegion = e.selectedOptions.map(x => x.id).join(';');
|
|
this.address.ReceiveRegionName = e.selectedOptions.map(x => x.text).join('');
|
|
},
|
|
submitOrder(e) {
|
|
// {
|
|
// "info": [
|
|
// {
|
|
// "proid": 0,
|
|
// "skuname": "string",
|
|
// "buynums": 0
|
|
// }
|
|
// ],
|
|
// "expresstype": true,
|
|
// "name": "string",
|
|
// "phone": "string",
|
|
// "province": "string",
|
|
// "city": "string",
|
|
// "county": "string",
|
|
// "address": "string",
|
|
// "isquan": true
|
|
// }
|
|
this.$post('/v1/client/FOrdersClient', {
|
|
info: [
|
|
{
|
|
proid: this.selected.id,
|
|
skuname: this.selected.skuname,
|
|
buynums: this.value
|
|
}
|
|
],
|
|
name: this.address.ReceiveName,
|
|
phone: this.address.ReceivePhone,
|
|
province: this.address.province,
|
|
city: this.address.city,
|
|
county: this.address.county,
|
|
address: this.address.ReceiveAddress,
|
|
}).then(data => {
|
|
// this.$showSuccessToast('权益购买成功');
|
|
// console.log(data);
|
|
this.$navigate('pay?ordernum=' + data.data);
|
|
// this.$navigate(`TradeList?TradeArea=gift&TradeStates=99`);
|
|
}).catch(err => {
|
|
this.$showFailToast(err.message || '购买失败');
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script> |