20261008
This commit is contained in:
+50
-18
@@ -9,11 +9,11 @@
|
||||
<text class="font-bold text-40">
|
||||
购物车(全部{{ list.length }})
|
||||
</text>
|
||||
<view class="flex justify-end items-center">
|
||||
<text>已选商品(不含运费)</text>
|
||||
<text class="text-main text-40 font-bold mx-20">￥{{ amount }}</text>
|
||||
<el-button type="primary" round>结算</el-button>
|
||||
</view>
|
||||
<!-- <view class="flex justify-end items-center">-->
|
||||
<!-- <text>已选商品(不含运费)</text>-->
|
||||
<!-- <text class="text-main text-40 font-bold mx-20">￥{{ amount }}</text>-->
|
||||
<!-- <el-button type="primary" round @click.native="addFromCart">结算</el-button>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<view class="py-20">
|
||||
<el-row :gutter="10">
|
||||
@@ -46,23 +46,24 @@
|
||||
<view class="flex justify-start items-start">
|
||||
<el-checkbox v-model="list[index].checked" @change="changeCheck($event, item._id)">
|
||||
</el-checkbox>
|
||||
<el-image :src="item.goods.cover" class="cover ml-20" fit="fit"/>
|
||||
<el-image :src="item.goods.cover" class="cover ml-20" fit="fit"/>
|
||||
<view class="flex flex-col justify-start items-start ml-20">
|
||||
{{ item.goods.name }}
|
||||
<text class="font-bold mb-15">{{ item.goods.name }}</text>
|
||||
<text class="text-gray">{{ item.sku.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<text class="text-35 font-bold flex-1">￥{{ item.goods.amount }}</text>
|
||||
<text class="text-35 font-bold flex-1">￥{{ item.sku.values }}</text>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<text class="text-35 font-bold flex-1">
|
||||
<el-input-number v-model="list[index].num" @change="changeNum" :min="1" size="small"/>
|
||||
<el-input-number v-model="list[index].num" @change="changeNum(index)" :min="1" size="small"/>
|
||||
</text>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<text class="text-35 font-bold flex-1 text-main">￥{{
|
||||
parseFloat(item.goods.amount) * item.num
|
||||
parseFloat(item.sku.values) * item.num
|
||||
}}
|
||||
</text>
|
||||
</el-col>
|
||||
@@ -72,7 +73,7 @@
|
||||
</el-row>
|
||||
</view>
|
||||
<view class="mt-20 flex justify-between items-center">
|
||||
<el-button type="text">移出购物车</el-button>
|
||||
<el-button type="text" @click.native="removeMulti" :disabled="selectedList.length === 0">移出购物车</el-button>
|
||||
<view class="flex justify-end items-center">
|
||||
<view>
|
||||
<text>已选商品</text>
|
||||
@@ -81,7 +82,7 @@
|
||||
</view>
|
||||
<text class="ml-35">合计(不含运费):</text>
|
||||
<text class="mx-15 font-bold text-40 text-main">￥{{ amount }}</text>
|
||||
<el-button type="primary" round :disabled="selectedList.length === 0">结算</el-button>
|
||||
<el-button type="primary" round :disabled="selectedList.length === 0" @click.native="addFromCart">结算</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -106,18 +107,27 @@ export default {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: "client/cart/kh/getList"
|
||||
})
|
||||
this.selectedAll = false
|
||||
this.list = rows.map(item => {
|
||||
item.checked = false
|
||||
return item
|
||||
})
|
||||
},
|
||||
doSelectAll() {
|
||||
this.selectedList = []
|
||||
this.list.forEach((item, index) => {
|
||||
this.list[index].checked = this.selectedAll
|
||||
if (this.selectedAll) this.selectedList.push(item._id)
|
||||
})
|
||||
},
|
||||
changeNum(e) {
|
||||
console.log(e)
|
||||
changeNum(index) {
|
||||
vk.callFunction({
|
||||
url: "client/cart/kh/changeNum",
|
||||
data: {
|
||||
id: this.list[index]._id,
|
||||
num: this.list[index].num
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCheck(e, id) {
|
||||
const index = this.selectedList.indexOf(id)
|
||||
@@ -126,15 +136,38 @@ export default {
|
||||
this.selectedAll = this.selectedList.length === this.list.length
|
||||
},
|
||||
remove(index) {
|
||||
this.list.splice(index, 1)
|
||||
vk.callFunction({
|
||||
url: "client/cart/kh/delete",
|
||||
data: {
|
||||
ids: [this.list[index]._id]
|
||||
}
|
||||
})
|
||||
this.list.splice(index, 1)
|
||||
},
|
||||
async removeMulti() {
|
||||
if (this.selectedList.length === 0) return
|
||||
await vk.callFunction({
|
||||
url: "client/cart/kh/delete",
|
||||
data: {
|
||||
ids: this.selectedList
|
||||
}
|
||||
})
|
||||
this.selectedList = []
|
||||
await this.getList()
|
||||
},
|
||||
async addFromCart(){
|
||||
const {data} = await vk.callFunction({
|
||||
url: "client/order/kh/addFromList",
|
||||
data: {
|
||||
type: 0,
|
||||
ids: this.selectedList
|
||||
}
|
||||
})
|
||||
this.selectedAll = false
|
||||
vk.navigateTo({
|
||||
url: `/pages/index/shop/pay?id=${data}`
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
@@ -143,8 +176,7 @@ export default {
|
||||
amount() {
|
||||
let tmpAmount = 0
|
||||
this.list.forEach(item => {
|
||||
console.log(item.checked)
|
||||
if (item.checked) tmpAmount += parseFloat(item.goods.amount) * parseInt(item.num)
|
||||
if (item.checked) tmpAmount += parseFloat(item.sku.values) * parseInt(item.num)
|
||||
})
|
||||
return tmpAmount
|
||||
}
|
||||
|
||||
+210
-112
@@ -1,142 +1,240 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<view class="page-nav">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<navigator style="display: inline-block;" url="/pages/index/shop/shop">特产商城</navigator>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-main">{{ info.name }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</view>
|
||||
<view class="bg-white p-40 flex justify-start items-start">
|
||||
<el-carousel height="400px" class="album">
|
||||
<el-carousel-item v-for="(item, index) in info.album" :key="index">
|
||||
<image :src="item" class="album-item" mode="aspectFill"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<view class="ml-35 flex flex-col justify-start items-start flex-1">
|
||||
<view class="font-bold text-40 mb-20">{{ info.name }}</view>
|
||||
<view class="flex flex-col justify-start items-start flex-1">
|
||||
<text>产品介绍:</text>
|
||||
<view class="desc p-20 mt-20">{{ info.desc }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center w-100p mt-20">
|
||||
<view class="flex justify-start items-center">
|
||||
<text>零售价:</text>
|
||||
<text class="font-bold text-main">￥{{ info.amount }}</text>
|
||||
</view>
|
||||
<view class="flex justify-end is-center">
|
||||
<el-button type="danger" round class="add-to-cart-btn" @click.native="addToCart">加入购物车</el-button>
|
||||
<el-button type="primary" round class="ml-35" @click.native="newOrder">立即购买</el-button>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<view class="page-nav">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<navigator style="display: inline-block;" url="/pages/index/shop/shop">特产商城</navigator>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-main">{{ info.name }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</view>
|
||||
<view class="bg-white p-40 flex justify-start items-start">
|
||||
<el-carousel height="500px" class="album">
|
||||
<el-carousel-item v-for="(item, index) in info.album" :key="index">
|
||||
<image :src="item" class="album-item" mode="aspectFill"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<view class="ml-35 flex flex-col justify-start items-start flex-1">
|
||||
<view class="font-bold text-40 mb-20">{{ info.name }}</view>
|
||||
<view class="flex flex-col justify-start items-start flex-1">
|
||||
<text>产品介绍:</text>
|
||||
<view class="desc p-20 mt-20">{{ info.desc }}</view>
|
||||
</view>
|
||||
<view class="flex flex-col items-start justify-start w-100p mt-20">
|
||||
<view class="flex flex-col justify-start items-start flex-1 mr-25 w-100p">
|
||||
<view class="flex justify-start items-center">
|
||||
<text>零售价:</text>
|
||||
<text class="font-bold text-main">￥{{ info.amount }}</text>
|
||||
</view>
|
||||
<view class="flex-1 w-100p" v-if="info.sku">
|
||||
<view class="w-100p my-25 flex flex-1 justify-center items-center p-15">
|
||||
<text class="flex-1 text-center">规格/分类/说明</text>
|
||||
<text class="flex-1 text-center">数量</text>
|
||||
<text class="flex-1 text-center">价格</text>
|
||||
</view>
|
||||
<view class="border my-25 flex justify-center items-center p-15 pointer sku"
|
||||
v-for="(item, index) in info.sku" :key="index"
|
||||
:class="[selectedSku === item._index ? 'sku-selected' : '']">
|
||||
<el-image v-if="item.image" :src="item.image" style="width: 40px; height: 40px"
|
||||
@click="selectedSku = item._index"/>
|
||||
<text class="flex-1 text-center" @click="selectedSku = item._index">{{
|
||||
item.label
|
||||
}}
|
||||
</text>
|
||||
<view class="flex-1 flex justify-center items-center" style="z-index: 999">
|
||||
<el-input-number v-model="info.sku[index].num" :min="1" size="small"/>
|
||||
</view>
|
||||
<text class="flex-1 text-center" @click="selectedSku = item._index">{{
|
||||
item.values
|
||||
}}元
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-40">
|
||||
<view class="intro-title">商品介绍</view>
|
||||
<view class="intro bg-white" v-html="info.content"></view>
|
||||
<view class="flex justify-center items-center w-100p mt-20">
|
||||
<el-button type="danger" round
|
||||
:class="selectedSku ? 'add-to-cart-btn' : 'add-to-cart-btn-disabled'"
|
||||
@click.native="addToCart" :disabled="!selectedSku">
|
||||
加入购物车
|
||||
</el-button>
|
||||
<el-button type="primary" round class="ml-35" @click.native="newOrder"
|
||||
:disabled="!selectedSku">立即购买
|
||||
</el-button>
|
||||
</view>
|
||||
<view class="mt-20 flex justify-start items-center">
|
||||
<template v-if="info.express">
|
||||
<transporter theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
||||
<text class="ml-10">快递:{{ info.express }}</text>
|
||||
</template>
|
||||
<text v-if="info.deliverDate" class="ml-35">{{ info.deliverDate }}</text>
|
||||
<text v-if="info.expressAmount !== undefined && info.expressAmount !== null" class="ml-35">
|
||||
运费:{{ info.expressAmount === 0 ? '免运费' : info.expressAmount }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="mt-20 flex justify-start items-center" v-if="info.ensureService">
|
||||
<like theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
||||
<text class="ml-10">{{ info.ensureService }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
|
||||
</view>
|
||||
<view class="mt-40" v-if="info.video">
|
||||
<view class="intro-title">视频介绍</view>
|
||||
<video :src="info.video" autoplay controls style="width: 100%; height: 800px"></video>
|
||||
</view>
|
||||
<view class="mt-40">
|
||||
<view class="intro-title">商品介绍</view>
|
||||
<view class="intro bg-white" v-html="info.content"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||||
import {Transporter, Like} from '@icon-park/vue'
|
||||
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
name: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.id = options.id;
|
||||
this.getInfo(options.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
async getInfo(id) {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/goods/list/pub/getDetail',
|
||||
data: {id}
|
||||
})
|
||||
},
|
||||
addToCart(){
|
||||
vk.callFunction({
|
||||
url: 'client/cart/kh/add',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
},
|
||||
success: (res) => {
|
||||
this.$message({
|
||||
type:'success',
|
||||
message: '添加成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
async newOrder(){
|
||||
const {data} = await vk.callFunction({
|
||||
url: 'client/order/kh/add',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
num: 1,
|
||||
type: 0
|
||||
}
|
||||
})
|
||||
vk.navigateTo({
|
||||
url: `/pages/index/shop/pay?id=${data}`
|
||||
})
|
||||
}
|
||||
components: {UGap, Transporter, Like},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
name: ''
|
||||
},
|
||||
num: 1,
|
||||
selectedSku: null
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.id = options.id;
|
||||
this.getInfo(options.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
async getInfo(id) {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/goods/list/pub/getDetail',
|
||||
data: {id}
|
||||
})
|
||||
if (this.info.sku && this.info.sku.length > 0) {
|
||||
this.info.sku.map((sku, index) => {
|
||||
this.$set(this.info.sku[index], 'num', 1)
|
||||
return sku
|
||||
})
|
||||
this.selectedSku = this.info.sku[0]._index
|
||||
}
|
||||
},
|
||||
addToCart() {
|
||||
if (!vk.getVuex('$user.userInfo.fadadaConfirm') || ([-1, 2].includes(vk.getVuex('$user.userInfo.authStatus')) && !vk.getVuex('$user.userInfo.userType'))) {
|
||||
this.$confirm('您尚未认证, 是否前往个人中心认证?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
vk.navigateTo({url: '/pages/user/user?menu=fadada'});
|
||||
})
|
||||
return
|
||||
}
|
||||
vk.callFunction({
|
||||
url: 'client/cart/kh/add',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
skuId: this.selectedSku,
|
||||
num: this.info.sku.find(item => item._index === this.selectedSku).num,
|
||||
},
|
||||
success: (res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '添加成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
async newOrder() {
|
||||
if (!vk.getVuex('$user.userInfo.fadadaConfirm') || ([-1, 2].includes(vk.getVuex('$user.userInfo.authStatus')) && !vk.getVuex('$user.userInfo.userType'))) {
|
||||
this.$confirm('您尚未认证, 是否前往个人中心认证?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
vk.navigateTo({url: '/pages/user/user?menu=fadada'});
|
||||
})
|
||||
return
|
||||
}
|
||||
const {data} = await vk.callFunction({
|
||||
url: 'client/order/kh/add',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
skuId: this.selectedSku,
|
||||
num: this.info.sku.find(item => item._index === this.selectedSku).num,
|
||||
type: 0
|
||||
}
|
||||
})
|
||||
vk.navigateTo({
|
||||
url: `/pages/index/shop/pay?id=${data}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.album {
|
||||
width: 500px;
|
||||
width: 500px;
|
||||
|
||||
.album-item {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
.album-item {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
background-color: #F5E2E3;
|
||||
background-color: #F5E2E3;
|
||||
}
|
||||
|
||||
.add-to-cart-btn{
|
||||
background-color: #FF7300;
|
||||
.add-to-cart-btn {
|
||||
background-color: #FF7300;
|
||||
}
|
||||
|
||||
.intro-title{
|
||||
background-color: #EF0021;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
.add-to-cart-btn-disabled {
|
||||
background-color: #f6aa6b;
|
||||
}
|
||||
|
||||
.intro{
|
||||
border-top: 1px solid #F95F6E;
|
||||
.intro-title {
|
||||
background-color: #EF0021;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro {
|
||||
border-top: 1px solid #F95F6E;
|
||||
}
|
||||
|
||||
.sku:hover {
|
||||
background-color: #F5E2E3;
|
||||
border: 1px solid #EF0021;
|
||||
}
|
||||
|
||||
.sku-selected {
|
||||
background-color: #F5E2E3;
|
||||
border: 1px solid #EF0021;
|
||||
}
|
||||
</style>
|
||||
|
||||
+519
-198
@@ -1,97 +1,202 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a bg-white p-40">
|
||||
<template v-if="info">
|
||||
<view class="pb-20 border-bottom flex justify-between items-center">
|
||||
<text>订单号: {{ info.orderNo }}</text>
|
||||
<text>下单时间: {{ info._add_time_str }}</text>
|
||||
</view>
|
||||
<view class="my-20">
|
||||
<text class="font-bold text-35">商品详情</text>
|
||||
<view class="flex justify-start items-start my-20">
|
||||
<text class="w-15p" v-if="info.type === 0">封面</text>
|
||||
<text class="w-40p">名称</text>
|
||||
<text class="w-15p">数量</text>
|
||||
<text class="w-15p">单价</text>
|
||||
<text class="w-15p">小计</text>
|
||||
</view>
|
||||
<view class="flex justify-start items-start my-20" v-for="(item, index) in info.goods" :key="index">
|
||||
<text class="w-15p" v-if="info.type === 0">
|
||||
<image :src="item.goodsCover" mode="aspectFit" class="goods-cover"/>
|
||||
</text>
|
||||
<text class="w-40p font-bold text-35">{{ item.goodsName }}</text>
|
||||
<text class="w-15p">x{{ item.num }}</text>
|
||||
<text class="w-15p text-main">￥{{ item.goodsPrice }}</text>
|
||||
<text class="w-15p">{{ item.goodsPrice * item.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="info.type === 0">
|
||||
<el-row :gutter="10" class="mb-20">
|
||||
<el-col :span="4">
|
||||
<el-input v-model="name" placeholder="请输入收件人姓名"/>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="phone" placeholder="请输入收件人手机号"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="border-bottom pb-20">
|
||||
<el-col :span="4">
|
||||
<el-select v-model="addressIndex[0]" placeholder="请选择省">
|
||||
<el-option v-for="(item, index) in provinceData" :key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-select v-model="addressIndex[1]" placeholder="请选择市"
|
||||
:disabled="addressIndex.length === 0">
|
||||
<template v-if="addressIndex[0] !== null">
|
||||
<el-option v-for="(item, index) in cityData[addressIndex[0]]" :key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-select v-model="addressIndex[2]" placeholder="请选择区"
|
||||
:disabled="addressIndex.length === 1">
|
||||
<template v-if="addressIndex[0] !== null && addressIndex[1] !== null">
|
||||
<el-option v-for="(item, index) in areaData[addressIndex[0]][addressIndex[1]]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input v-model="addressDetail" placeholder="请输入详细地址"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<view class="mt-20 w-50p flex flex-col justify-center items-center m-a">
|
||||
<text class="text-main font-bold text-40 mb-20" v-if="info">订单金额:￥{{ info.amount }}</text>
|
||||
<el-button type="primary" round
|
||||
:disabled="(info.type === 0 && (!phone || !name || addressIndex.length < 3))" @click="onPay">
|
||||
立即支付
|
||||
</el-button>
|
||||
</view>
|
||||
<div class="pay-price" v-if="billQRCode">
|
||||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||||
<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
|
||||
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
||||
</div>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<!-- <common-header></common-header>-->
|
||||
<!-- <category-bar></category-bar>-->
|
||||
<view class="w-1200 m-a bg-white p-40 mt-20">
|
||||
<template v-if="info">
|
||||
<view class="pb-20 border-bottom flex justify-between items-center">
|
||||
<text>订单号: {{ info.orderNo }}</text>
|
||||
<text>下单时间: {{ info._add_time_str }}</text>
|
||||
</view>
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
<view class="my-20">
|
||||
<text class="font-bold text-35">商品详情</text>
|
||||
<view class="flex justify-start items-start my-20">
|
||||
<text class="w-15p" v-if="info.type === 0">封面</text>
|
||||
<text class="w-40p">商品详情</text>
|
||||
<text class="w-15p">数量</text>
|
||||
<text class="w-15p">单价</text>
|
||||
<text class="w-15p">小计</text>
|
||||
</view>
|
||||
<view class="flex justify-start items-start my-20" v-for="(item, index) in info.goods" :key="index">
|
||||
<text class="w-15p" v-if="info.type === 0">
|
||||
<image :src="item.goodsCover" mode="aspectFit" class="goods-cover"/>
|
||||
</text>
|
||||
<template v-if="info.type === 0">
|
||||
<view class="flex flex-col justify-start items-start w-40p">
|
||||
<text class=" font-bold text-35">{{ item.goodsName }}</text>
|
||||
<text class="mt-15 text-gray">{{ item.sku.label }}</text>
|
||||
</view>
|
||||
<text class="w-15p">x{{ item.num }}</text>
|
||||
<text class="w-15p text-main">￥{{ item.sku.values }}</text>
|
||||
<text class="w-15p font-bold">￥{{ item.sku.values * item.num }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="flex flex-col justify-start items-start w-40p">
|
||||
<text class=" font-bold text-35">{{ item.goodsName }}</text>
|
||||
</view>
|
||||
<text class="w-15p">x{{ item.num }}</text>
|
||||
<text class="w-15p text-main">￥{{ item.goodsPrice }}</text>
|
||||
<text class="w-15p font-bold">￥{{ item.goodsPrice * item.num }}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="info.type === 0">
|
||||
<div class="p-20 rounded border m-30 pointer address" v-if="!address" @click="showAddress">
|
||||
点击选择地址
|
||||
</div>
|
||||
<div v-else
|
||||
class="py-20 flex justify-between items-center">
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<div class="flex justify-start items-center">
|
||||
<text class="font-bold">{{ address.name }}</text>
|
||||
</div>
|
||||
<text>{{ address.phone }}</text>
|
||||
<text v-if="address.addressRegion && address.addressRegion.province">{{
|
||||
address.addressRegion.province.name
|
||||
}}{{
|
||||
address.addressRegion.city.name
|
||||
}}{{ address.addressRegion.area.name }}{{ address.addressDetail }}
|
||||
</text>
|
||||
<text v-else-if="info.address.province">{{ info.address.province.name }}{{
|
||||
info.address.city.name
|
||||
}}{{ info.address.area.name }}{{ info.addressDetail }}
|
||||
</text>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<el-button type="primary" @click="showAddress">
|
||||
变更
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <view class="mt-40 font-bold text-main">您的会员等级:-->
|
||||
<!-- {{ getUserLevelLabel(vk.getVuex('$user.userInfo.userLevel')) }}-->
|
||||
<!-- {{ info.offRate !== 100 ? `,享受${info.offRate / 10}折优惠,已为您优惠${info.saveAmount}元` : '' }}-->
|
||||
<!-- </view>-->
|
||||
<div v-if="info.type === 0" class="my-20">
|
||||
<p>备注和要求:</p>
|
||||
<el-input v-model="remark" type="textarea"/>
|
||||
</div>
|
||||
<view class="mt-40 w-50p flex flex-col justify-center items-center m-a">
|
||||
<text class=" mb-20"
|
||||
:class="[info.amount !== info.offAmount ? 'text-line-through text-30' : 'text-main font-bold text-40']"
|
||||
v-if="info">
|
||||
订单金额:￥{{ info.amount }}
|
||||
</text>
|
||||
<text class="text-main font-bold text-40 mb-20" v-if="info && info.amount !== info.offAmount">
|
||||
优惠后金额:￥{{ parseFloat(info.offAmount).toFixed(2) }}
|
||||
</text>
|
||||
<el-button type="primary" round
|
||||
:disabled="(info.type === 0 && !address)" @click="onPay">
|
||||
立即支付
|
||||
</el-button>
|
||||
</view>
|
||||
<div class="pay-price" v-if="billQRCode">
|
||||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||||
<div class="pay-desc">微信、支付宝、云闪付扫码完成支付</div>
|
||||
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
||||
</div>
|
||||
</view>
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="50%" :close-on-click-modal="false"
|
||||
@close="dialogVisible = false">
|
||||
<template v-if="dialogVisible && dialogType === 'address-list'">
|
||||
<div v-for="(item, index) in addressList" :key="index"
|
||||
class="py-20 border-bottom flex justify-between items-center">
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<div class="flex justify-start items-center">
|
||||
<text v-if="item.isDefault" class="default-address">默</text>
|
||||
<text class="font-bold">{{ item.name }}</text>
|
||||
</div>
|
||||
<text>{{ item.phone }}</text>
|
||||
<text>{{ item.addressRegion.province.name }}{{
|
||||
item.addressRegion.city.name
|
||||
}}{{ item.addressRegion.area.name }}{{ item.addressDetail }}
|
||||
</text>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<el-button type="primary" @click="address = item; dialogVisible = false" size="small">
|
||||
选择
|
||||
</el-button>
|
||||
<el-button type="warning" @click="addressEdit(item)" plain size="small" class="mt-20">
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<el-button plain @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogType = 'address-action'; dialogTitle = '新增地址'">
|
||||
新增地址
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col justify-start" v-else-if="dialogVisible && dialogType === 'address-action'">
|
||||
<el-form ref="form" label-width="100px">
|
||||
<el-row :gutter="10" class="mb-20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收件人姓名">
|
||||
<el-input v-model="name" placeholder="请输入收件人姓名"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收件人手机号">
|
||||
<el-input v-model="phone" placeholder="请输入收件人手机号"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="收件人地址">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="addressIndex[0]" placeholder="请选择省" class="w-100p">
|
||||
<el-option v-for="(item, index) in provinceData" :key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select v-model="addressIndex[1]" placeholder="请选择市" class="w-100p"
|
||||
:disabled="addressIndex.length === 0">
|
||||
<template v-if="addressIndex[0] !== null">
|
||||
<el-option v-for="(item, index) in cityData[addressIndex[0]]" :key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select v-model="addressIndex[2]" placeholder="请选择区" class="w-100p"
|
||||
:disabled="addressIndex.length === 1">
|
||||
<template v-if="addressIndex[0] !== null && addressIndex[1] !== null">
|
||||
<el-option v-for="(item, index) in areaData[addressIndex[0]][addressIndex[1]]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="addressDetail" placeholder="请输入详细地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="默认地址">
|
||||
<el-switch v-model="isDefault"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="flex justify-center items-center">
|
||||
<el-button type="primary" @click="onAddressAction">保存</el-button>
|
||||
<el-button @click="dialogTitle = '地址列表'; dialogType = 'address-list'">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -99,131 +204,347 @@ import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||||
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
||||
import dayjs from "dayjs";
|
||||
import {Loading} from "element-ui";
|
||||
import {getUserLevelLabel} from "../../../util";
|
||||
|
||||
const OpenSdk = require('../../user/lib/base').default;
|
||||
|
||||
const sdk = new OpenSdk({
|
||||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||||
// appId: '10037e6f6823b20801682b6a5e5a0006',
|
||||
// appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||||
// 正式
|
||||
appId: '8a81c1db8fc5238d01910b9e312d0692',
|
||||
appKey: 'a15ceac60f5b464eb758c4fe7800ee9f'
|
||||
// 测试分账
|
||||
// appId: 'f0ec96ad2c3848b5b810e7aadf369e2f',
|
||||
// appKey: '775481e2556e4564985f5439a5e6a277'
|
||||
})
|
||||
|
||||
// const mid = '8984501521190CF'
|
||||
// const tid = '20713432'
|
||||
const mid = '898450100002303'
|
||||
const tid = 'G5SBN2XJ'
|
||||
// const mid = '898310060514001'
|
||||
// const tid = '00000001'
|
||||
|
||||
export default {
|
||||
name: "order",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
type: null
|
||||
},
|
||||
provinceData: provinces,
|
||||
cityData: citys,
|
||||
areaData: areas,
|
||||
addressIndex: [null, null, null],
|
||||
addressDetail: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
billQRCode: null,
|
||||
checkPayInterval: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getInfo() {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/order/kh/getInfo',
|
||||
data: {
|
||||
id: this.id
|
||||
}
|
||||
})
|
||||
if (this.info.orderStatus === 1) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '订单已支付成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$router.push({
|
||||
path: '/pages/user/order',
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
async onPay() {
|
||||
if (this.info.type === 0) {
|
||||
if (this.addressIndex.length > 2 && this.addressIndex[2] === null) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/updateAddress',
|
||||
data: {
|
||||
id: this.id,
|
||||
address: [provinces[this.addressIndex[0]], citys[this.addressIndex[0]][this.addressIndex[1]], areas[this.addressIndex[0]][this.addressIndex[1]][this.addressIndex[2]]],
|
||||
addressDetail: this.addressDetail,
|
||||
phone: this.phone,
|
||||
name: this.name,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
const timestamp = dayjs().format('YYYYMMDDHHmmss')
|
||||
const goods = []
|
||||
let goodsName = this.info.goods[0].goodsName
|
||||
goods.push({goodsName})
|
||||
if (this.info.goods.length > 1) goodsName += `等${this.info.goods.length - 1}件商品`
|
||||
let data = {
|
||||
queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
billNo: this.info.orderNo,
|
||||
requestTimestamp,
|
||||
mid: '898201612345678',
|
||||
tid: '88880001',
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: 1,
|
||||
notifyUrl: 'https://fc-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/pay_notify',
|
||||
goods
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
sdk.exec(data).then(res => {
|
||||
const h = this.$createElement;
|
||||
const result = JSON.parse(res);
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
setTimeout(() => {
|
||||
this.checkPayInterval = setInterval(() => {
|
||||
this.getInfo()
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.id = options.id
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
name: "order",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
type: null,
|
||||
offRate: 100
|
||||
},
|
||||
provinceData: provinces,
|
||||
cityData: citys,
|
||||
areaData: areas,
|
||||
addressIndex: [null, null, null],
|
||||
addressDetail: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
billQRCode: null,
|
||||
checkPayInterval: null,
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
dialogType: '',
|
||||
address: null,
|
||||
addressList: [],
|
||||
selectedAddressId: null,
|
||||
isDefault: false,
|
||||
remark: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserLevelLabel,
|
||||
async getInfo(resetOrderNo = false) {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/order/kh/getInfo',
|
||||
data: {
|
||||
id: this.id,
|
||||
resetOrderNo
|
||||
}
|
||||
})
|
||||
if (this.info.name) {
|
||||
this.address = {
|
||||
name: this.info.name,
|
||||
phone: this.info.phone,
|
||||
addressDetail: this.info.addressDetail,
|
||||
addressRegion: {
|
||||
province: this.info.address.province,
|
||||
city: this.info.address.city,
|
||||
area: this.info.address.area,
|
||||
},
|
||||
}
|
||||
}
|
||||
if (this.info.orderStatus === -1) {
|
||||
this.$message.error('订单已取消')
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
vk.redirectTo({
|
||||
url: '/pages/order/order?menuIndex=1',
|
||||
})
|
||||
}
|
||||
|
||||
if ([1, 4].includes(this.info.orderStatus)) {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '订单已支付成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
if ([7, 11].includes(this.info.type)) {
|
||||
vk.navigateBack()
|
||||
} else if (this.info.type === 13) {
|
||||
vk.redirectTo({
|
||||
url: '/pages/contract/index?tab=sign',
|
||||
})
|
||||
} else if (this.info.type === 10) {
|
||||
vk.redirectTo({
|
||||
url: '/pages/index/old/release',
|
||||
})
|
||||
} else {
|
||||
vk.redirectTo({
|
||||
url: '/pages/order/order?menuIndex=1',
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
async onPay() {
|
||||
if (this.info.type === 0) {
|
||||
if (!this.address) return this.$message({type: 'error', message: '请选择地址'})
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/updateAddress',
|
||||
data: {
|
||||
id: this.id,
|
||||
address: {
|
||||
province: this.address.addressRegion.province,
|
||||
city: this.address.addressRegion.city,
|
||||
area: this.address.addressRegion.area,
|
||||
},
|
||||
addressDetail: this.address.addressDetail,
|
||||
phone: this.address.phone,
|
||||
name: this.address.name,
|
||||
remark: this.remark,
|
||||
}
|
||||
})
|
||||
}
|
||||
// await vk.callFunction({
|
||||
// url: 'client/user/pub/pay',
|
||||
// data: {
|
||||
// orderNo: this.info.orderNo,
|
||||
// billStatus: 'PAID',
|
||||
// billPayment: JSON.stringify({
|
||||
// payTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// receiptAmount: this.info.offAmount * 100,
|
||||
// paySeqId: 'asdasd'
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// this.checkPayInterval = setInterval(() => {
|
||||
// this.getInfo()
|
||||
// }, 1000)
|
||||
// return
|
||||
const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
const timestamp = dayjs().format('YYYYMMDDHHmmss')
|
||||
// 平台分账金额
|
||||
let platformAmount = 0
|
||||
const goodsList = []
|
||||
// let goodsName = this.info.goods[0].goodsName
|
||||
// goods.push({goodsName})
|
||||
// if (this.info.goods.length > 1) goodsName += `等${this.info.goods.length - 1}件商品`
|
||||
let subOrderAmount = 0
|
||||
this.info.goods.forEach((goods, index) => {
|
||||
const goodsData = {
|
||||
goodsName: goods.goodsName
|
||||
}
|
||||
if (goods.company && goods.company.merchantCode && goods.company.settleRate) {
|
||||
// subOrderAmount += parseInt((goods.company.settleRate * goods.price).toString())
|
||||
// goodsData['subOrderAmount'] = parseInt((goods.company.settleRate * goods.price).toString())
|
||||
subOrderAmount += 9
|
||||
goodsData['subOrderAmount'] = 9
|
||||
goodsData['subMerchantId'] = goods.company.merchantCode
|
||||
goodsData['merOrderId'] = this.info.orderNo + index
|
||||
}
|
||||
goodsList.push(goodsData)
|
||||
})
|
||||
if (subOrderAmount > 0) platformAmount = this.info.offAmount * 100 - subOrderAmount
|
||||
// let data = {
|
||||
// queryUrl: 'https://test-api-open.chinaums.com/v1/inip/upsp/shop/csb/get-qrcode',
|
||||
// sysSource: 'OPT',
|
||||
// vaMchntNo: mid,
|
||||
// vaTermNo: tid,
|
||||
// timestamp,
|
||||
// nonce: 'rp84ufhfn20yneo3tp',
|
||||
// billNo: this.info.orderNo,
|
||||
// totalAmount: 10,
|
||||
// notifyUrl: 'https://www.jinjiuxinzg.cn/pay_notify',
|
||||
// vaFld:
|
||||
// }
|
||||
let attachedData = this.info.goods[0].goodsName
|
||||
if (this.info.goods.length > 1) attachedData += `等${this.info.goods.length - 1}件商品`
|
||||
let data = {
|
||||
queryUrl: 'https://api-mop.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
billNo: this.info.orderNo,
|
||||
requestTimestamp,
|
||||
mid,
|
||||
tid,
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: parseInt(this.info.offAmount * 100).toFixed(0),
|
||||
notifyUrl: 'https://tcb-n44byxi8bmrfrki-d4bn1c4a206d.service.tcloudbase.com/pay_notify',
|
||||
// notifyUrl: 'https://www.jinjiuxinzg.cn/pay_notify',
|
||||
goods: goodsList,
|
||||
attachedData,
|
||||
billDesc: attachedData,
|
||||
}
|
||||
}
|
||||
if (platformAmount > 0) {
|
||||
data['divisionFlag'] = true
|
||||
data['platformAmount'] = platformAmount
|
||||
}
|
||||
console.log(data)
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
const loadingInstance = Loading.service({fullscreen: true, text: '请求中'});
|
||||
|
||||
sdk.exec(data).then(res => {
|
||||
this.$nextTick(() => {
|
||||
loadingInstance.close();
|
||||
});
|
||||
const h = this.$createElement;
|
||||
const result = JSON.parse(res);
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
setTimeout(() => {
|
||||
this.checkPayInterval = setInterval(() => {
|
||||
this.getInfo()
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$nextTick(() => {
|
||||
loadingInstance.close();
|
||||
});
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '服务器繁忙，请稍后再试或联系平台客服'
|
||||
})
|
||||
setTimeout(() => {
|
||||
vk.redirectTo({
|
||||
url: '/pages/order/order?activeName=0&menuIndex=1',
|
||||
})
|
||||
}, 1500)
|
||||
})
|
||||
},
|
||||
async onAddressAction() {
|
||||
if (!this.name) return this.$message({type: 'error', message: '请填写收件人姓名'})
|
||||
if (!this.phone) return this.$message({type: 'error', message: '请填写收件人手机号'})
|
||||
if (!this.addressDetail || this.addressIndex[2] === null) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写地址'
|
||||
})
|
||||
const province = this.provinceData[this.addressIndex[0]]
|
||||
const city = this.cityData[this.addressIndex[0]][this.addressIndex[1]]
|
||||
const area = this.areaData[this.addressIndex[0]][this.addressIndex[1]][this.addressIndex[2]]
|
||||
this.addressRegion = {
|
||||
province: {code: province.code, name: province.name},
|
||||
city: {code: city.code, name: city.name},
|
||||
area: {code: area.code, name: area.name},
|
||||
}
|
||||
await vk.callFunction({
|
||||
url: 'client/userAddress/kh/addUpdate',
|
||||
data: {
|
||||
id: this.selectedAddressId ?? null,
|
||||
name: this.name,
|
||||
phone: this.phone,
|
||||
addressDetail: this.addressDetail,
|
||||
addressRegion: this.addressRegion,
|
||||
isDefault: this.isDefault
|
||||
}
|
||||
})
|
||||
this.name = ''
|
||||
this.phone = ''
|
||||
this.addressDetail = ''
|
||||
this.addressIndex = [null, null, null,]
|
||||
this.dialogType = 'address-list'
|
||||
this.dialogTitle = '地址列表'
|
||||
await this.getUserAddress()
|
||||
},
|
||||
async getUserAddress() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/userAddress/kh/getList'
|
||||
})
|
||||
this.addressList = rows
|
||||
},
|
||||
showAddress() {
|
||||
this.dialogType = 'address-list'
|
||||
this.dialogTitle = '选择地址'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
addressEdit(item) {
|
||||
this.selectedAddressId = item._id
|
||||
this.name = item.name
|
||||
this.phone = item.phone
|
||||
this.addressDetail = item.addressDetail
|
||||
this.addressIndex[0] = this.provinceData.findIndex(i => i.code === item.addressRegion.province.code)
|
||||
this.addressIndex[1] = this.cityData[this.addressIndex[0]].findIndex(i => i.code === item.addressRegion.city.code)
|
||||
this.addressIndex[2] = this.areaData[this.addressIndex[0]][this.addressIndex[1]].findIndex(i => i.code === item.addressRegion.area.code)
|
||||
this.dialogType = 'address-action';
|
||||
this.dialogTitle = ' 编辑地址'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.id = options.id
|
||||
this.getInfo(true)
|
||||
this.getUserAddress()
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
},
|
||||
onUnload() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-cover {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
.pay-price {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pay-desc {
|
||||
font-size: 16px;
|
||||
line-height: 2em;
|
||||
font-size: 16px;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.address:hover {
|
||||
border: 1px solid #a92924;
|
||||
background-color: #f1c7c7;
|
||||
}
|
||||
|
||||
.default-address {
|
||||
background-color: #a92924;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
</style>
|
||||
+294
-208
@@ -1,63 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>地区：</text>
|
||||
<el-cascader :options="options" :props="{label: 'name', value: 'code'}" v-model="address"
|
||||
@change="getGoodsList()" clearable/>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="item">分类：</view>
|
||||
<view class="item" @click="selectCate(null)">全部</view>
|
||||
<view class="item" v-for="(item, index) in categoryList" :key="index"
|
||||
@click="selectCate(item._id)"
|
||||
:class="[categoryId === item._id? 'active' : '']">{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<common-swiper page="shop"/>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<el-row :gutter="10" flex justify="center" align="center">
|
||||
<el-col :span="8">
|
||||
<el-input v-model="keyword" placeholder="请输入商品名称" clearable @clear="getGoodsList()"
|
||||
@keyup.enter.native="getGoodsList()" class="w-100"/>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<view class="flex justify-start items-center">
|
||||
<text class="text-25">特产地区：</text>
|
||||
<el-cascader :options="options" :props="{label: 'name', value: 'code'}"
|
||||
v-model="address"
|
||||
@change="getGoodsList()" clearable/>
|
||||
</view>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png"
|
||||
mode="widthFix"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</view>
|
||||
|
||||
<view class="goods-list">
|
||||
<view class="flex flex-wrap justify-start is-status">
|
||||
<view class="w-20p" v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="p-20">
|
||||
<view class="grid-content bg-purple pointer"
|
||||
@click="navTo(`/pages/index/shop/detail?id=${item._id}`)">
|
||||
<image :src="item.cover" mode="aspectFill"/>
|
||||
<view class="comments">
|
||||
<view class="goods-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="goods-price">￥{{ item.amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
@click="getGoodsList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="item">分类：</view>
|
||||
<view class="item" @click="selectCate(null)">全部</view>
|
||||
<view class="item" v-for="(item, index) in categoryList" :key="index"
|
||||
@click="selectCate(item._id)"
|
||||
:class="[categoryId === item._id? 'active' : '']">{{ item.name }}
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<right-bar></right-bar>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</view>
|
||||
<div class="m-a w-1200 flex justify-start items-center flex-wrap" v-if="adLoaded">
|
||||
<div v-for="(ad, adIndex) in adList" :key="adIndex"
|
||||
:style="{width: '600px'}">
|
||||
<template v-if="ad.length > 0">
|
||||
<el-carousel :height="`100px`" class="m-a">
|
||||
<el-carousel-item v-for="(item, index) in ad" :key="index" :style="{width: '600px'}">
|
||||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||||
class="pointer" :src="item.swiper" mode="aspectFill"
|
||||
:style="{width: '100%', height: '100px'}"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<view class="goods-list">
|
||||
<view class="flex flex-wrap justify-start is-status">
|
||||
<view class="w-20p " v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="p-20 ">
|
||||
<view class="grid-content bg-purple pointer pos-r"
|
||||
@click="navTo(`/pages/index/shop/detail?id=${item._id}`)">
|
||||
<text class="recommend" v-if="item.recommend === 1">荐</text>
|
||||
<image :src="item.cover" mode="aspectFill"/>
|
||||
<view class="comments">
|
||||
<view class="goods-name" style="height: 60px">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="goods-price">￥{{ item.amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
@click="getGoodsList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<right-bar></right-bar>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -66,184 +92,244 @@ import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||||
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
categoryList: [],
|
||||
goodsList: [],
|
||||
list: [
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [],
|
||||
address: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
categoryId: null
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
this.options = provinces.map(item => {
|
||||
item.children = [];
|
||||
return item
|
||||
})
|
||||
this.options.forEach((province, index) => {
|
||||
citys[index].forEach(city => {
|
||||
this.options[index].children.push(city)
|
||||
})
|
||||
})
|
||||
this.getCategoryList()
|
||||
this.getGoodsList()
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
getCategoryList() {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/category/pub/getList'
|
||||
}).then(res => {
|
||||
this.categoryList = res.rows
|
||||
})
|
||||
},
|
||||
getGoodsList(pageIndex = 1) {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/list/pub/getList',
|
||||
data: {
|
||||
pageIndex,
|
||||
pageSize: this.pageSize,
|
||||
city: this.address.length > 1 ? this.address[1] : null,
|
||||
parentId: this.categoryId
|
||||
}
|
||||
}).then(res => {
|
||||
this.goodsList = res.rows
|
||||
})
|
||||
},
|
||||
selectCate(cateId) {
|
||||
if (this.categoryId === cateId) this.categoryId = null
|
||||
else this.categoryId = cateId
|
||||
this.getGoodsList()
|
||||
}
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
categoryList: [],
|
||||
goodsList: [],
|
||||
options: [],
|
||||
address: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
categoryId: null,
|
||||
keyword: null,
|
||||
adList: [],
|
||||
adNum: 0,
|
||||
adLoaded: false
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
await this.getCategoryList()
|
||||
if (options && options.menu) this.currMenu = options.menu
|
||||
if (options && options.keyword) this.keyword = options.keyword
|
||||
if (options && options.cateName) {
|
||||
const cate = this.categoryList.find(item => item.name === options.cateName)
|
||||
if (cate) this.categoryId = cate._id
|
||||
}
|
||||
|
||||
this.options = provinces.map(item => {
|
||||
item.children = [];
|
||||
return item
|
||||
})
|
||||
this.options.forEach((province, index) => {
|
||||
citys[index].forEach(city => {
|
||||
this.options[index].children.push(city)
|
||||
})
|
||||
})
|
||||
|
||||
console.error(this.options)
|
||||
|
||||
this.getGoodsList()
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
async getCategoryList() {
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/goods/category/pub/getList'
|
||||
})
|
||||
this.categoryList = res.rows
|
||||
},
|
||||
getGoodsList(pageIndex = 1) {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/list/pub/getList',
|
||||
data: {
|
||||
pageIndex,
|
||||
pageSize: this.pageSize,
|
||||
city: this.address.length > 1 ? this.address[1] : null,
|
||||
parentId: this.categoryId,
|
||||
keyword: this.keyword
|
||||
}
|
||||
}).then(res => {
|
||||
this.goodsList = res.rows
|
||||
this.getAdList()
|
||||
})
|
||||
},
|
||||
selectCate(cateId) {
|
||||
if (this.categoryId === cateId) this.categoryId = null
|
||||
else this.categoryId = cateId
|
||||
this.getGoodsList()
|
||||
},
|
||||
async getAdList() {
|
||||
this.adList = [[], [], [], [], []]
|
||||
if (this.address.length === 0) {
|
||||
if (!this.categoryId) {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/ad/pub/getList',
|
||||
data: {
|
||||
adKey: 27 + i
|
||||
}
|
||||
})
|
||||
if (res.data) this.adList[i] = res.data
|
||||
}
|
||||
} else {
|
||||
const cate = this.categoryList.find(item => item._id === this.categoryId)
|
||||
if (cate.ad && cate.ad.length > 0) {
|
||||
cate.ad.forEach(item => {
|
||||
this.adList[item.adKey - 27].push(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/ad/pub/getList',
|
||||
data: {
|
||||
adKey: 27 + i,
|
||||
region: this.address[0]
|
||||
}
|
||||
})
|
||||
if (res.data) this.adList[i] = res.data
|
||||
// rows.forEach(item => {
|
||||
// if (item.businessCard.album && item.businessCard.album.length > 0) {
|
||||
// this.adList[i].push({
|
||||
// swiper: Array.isArray(item.businessCard.album) ? item.businessCard.album[0] : item.businessCard.album,
|
||||
// companyId: item._id
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
this.adNum = 0
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (this.adList[i].length > 0) {
|
||||
this.adNum += 1
|
||||
}
|
||||
}
|
||||
this.adLoaded = true
|
||||
this.$forceUpdate()
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.w-1200 {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
|
||||
.test {
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.test {
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:hover, .active {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:hover, .active {
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
|
||||
.grid-content {
|
||||
.grid-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
line-height: 2em;
|
||||
width: 100%;
|
||||
|
||||
.goods-name {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
line-height: 2em;
|
||||
width: 100%;
|
||||
|
||||
.goods-name {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: #bf2b28;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.goods-price {
|
||||
color: #bf2b28;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
.bg-purple {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
|
||||
image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.recommend {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 5px;
|
||||
background-color: #bf2b28;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user