20261008
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle title="购物车"></uititle>
|
||||
</u-sticky>
|
||||
<view class="cart-box">
|
||||
<view class="item flex" v-for="(item,index) in list" :key="index">
|
||||
<view class="check-box">
|
||||
<view class="check" :class="{ on: selectedList.includes(item._id) }"
|
||||
@click="changeCheck(item._id)"></view>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image :src="item.goods.cover" mode=""></image>
|
||||
</view>
|
||||
<view class="info flex-1">
|
||||
<view class="name ellipsis">{{ item.goods.name }}</view>
|
||||
<view class="spc ellipsis">{{ item.sku.label }}</view>
|
||||
<view class="price ellipsis">{{ item.sku.values }}元</view>
|
||||
<view class="other">
|
||||
<view class="subtract" @click="sub(item,index)">-</view>
|
||||
<view class="num">{{ item.num }}</view>
|
||||
<view class="increase" @click="add(item,index)">+</view>
|
||||
</view>
|
||||
<view class="delete">
|
||||
<image src="/static/image/delete.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed flex justify-start items-center">
|
||||
<view class="p-20" v-if="selectedList.length > 0">
|
||||
<u-button type="primary" plain size="mini" @click="removeMulti">移出购物车</u-button>
|
||||
</view>
|
||||
<view class="total flex-1">合计：¥{{ amount }}</view>
|
||||
<view class="btn" @click="addFromCart">立即结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from "@/components/common/title.vue";
|
||||
|
||||
export default {
|
||||
components: {uititle},
|
||||
data() {
|
||||
return {
|
||||
totalPrice: 0,
|
||||
list: [],
|
||||
selectedList: [],
|
||||
selectedAll: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selected(item, index) {
|
||||
if (item.check == 0) {
|
||||
this.cartList[index].check = 1
|
||||
this.selectedList.push(item)
|
||||
this.getTotalPrice()
|
||||
} else {
|
||||
this.cartList[index].check = 0
|
||||
this.selectedList = this.selectedList.filter(val => val.id != this.cartList[index].id)
|
||||
console.log(this.selectedList)
|
||||
this.getTotalPrice()
|
||||
}
|
||||
},
|
||||
// 减少数量(执行接口)
|
||||
sub(item, index) {
|
||||
if (this.list[index].num <= 1) {
|
||||
return;
|
||||
}
|
||||
this.list[index].num--;
|
||||
this.getTotalPrice()
|
||||
this.changeNum(index)
|
||||
},
|
||||
// 增加数量(执行接口)
|
||||
add(item, index) {
|
||||
this.list[index].num++;
|
||||
this.getTotalPrice()
|
||||
this.changeNum(index)
|
||||
},
|
||||
getTotalPrice() {
|
||||
this.totalPrice = 0
|
||||
if (this.selectedList.length > 0) {
|
||||
this.selectedList.forEach(val => {
|
||||
this.totalPrice += (Math.floor(val.num * 100) * Math.floor(val.price * 100)) / 10000
|
||||
})
|
||||
} else {
|
||||
this.totalPrice = 0
|
||||
}
|
||||
},
|
||||
async getList() {
|
||||
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(index) {
|
||||
vk.callFunction({
|
||||
url: "client/cart/kh/changeNum",
|
||||
data: {
|
||||
id: this.list[index]._id,
|
||||
num: this.list[index].num
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCheck(id) {
|
||||
const index = this.selectedList.indexOf(id)
|
||||
if (index === -1) this.selectedList.push(id)
|
||||
else this.selectedList.splice(index, 1)
|
||||
this.selectedAll = this.selectedList.length === this.list.length
|
||||
},
|
||||
remove(index) {
|
||||
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/shop/pay?id=${data}`
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
amount() {
|
||||
let tmpAmount = 0
|
||||
this.list.forEach(item => {
|
||||
if (this.selectedList.includes(item._id)) tmpAmount += parseFloat(item.sku.values) * parseInt(item.num)
|
||||
})
|
||||
return tmpAmount
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding-bottom: 110rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.btn {
|
||||
width: 300rpx;
|
||||
background-color: #fb080e;
|
||||
font-size: 30rpx;
|
||||
line-height: 100rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total {
|
||||
padding-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
line-height: 100rpx;
|
||||
|
||||
text {
|
||||
color: #fb080e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 25rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.check {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
border: 1px solid #C0C0C0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.on {
|
||||
border-color: #04c2ae;
|
||||
background-color: #04c2ae;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 40rpx;
|
||||
z-index: 9;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
//height: 46rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.spc {
|
||||
width: 100%;
|
||||
height: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
// margin-top: 10rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
color: #e88a00;
|
||||
}
|
||||
|
||||
.other {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.increase, .subtract {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background-color: #04c2ae;
|
||||
}
|
||||
|
||||
.num {
|
||||
padding: 0 10rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #04c2ae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item label="物流公司">
|
||||
{{ info.expressName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="物流单号">
|
||||
{{ info.expressNo }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发货单">
|
||||
<el-image v-for="(item, index) in info.expressPhoto" :key="index" :src="item"
|
||||
class="mr-10 mb-10"
|
||||
:preview-src-list="info.expressPhoto" style="width: 100px;height: 100px"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
{{ info.remark }}
|
||||
</el-form-item>
|
||||
<div class="mt-20 flex justify-center items-center text-center">
|
||||
<el-button type="primary" size="small" plain @click.native="close">关闭</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "expressInfo",
|
||||
props: {
|
||||
info: Object
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="py-20">
|
||||
<view class="py-20 mb-20 flex justify-between items-center w-100p border-bottom" v-for="(item, index) in goods"
|
||||
:key="index">
|
||||
<view class="flex justify-start items-start">
|
||||
<view class="flex justify-start items-start">
|
||||
<el-image :src="getGoodsImage(item)" class="cover ml-20" fit="cover" v-if="getGoodsImage(item)"/>
|
||||
<view class="flex flex-col justify-start items-start ml-20">
|
||||
<text class="font-bold mb-15">{{ item.goodsName }}</text>
|
||||
<text class="text-gray" v-if="order.type === 0">{{ item.sku.label }}</text>
|
||||
<view class="flex justify-start items-center mt-20">
|
||||
<text class="text-25 font-bold" v-if="order.type === 0">￥{{
|
||||
item.sku.values
|
||||
}}
|
||||
</text>
|
||||
<text class="text-25 font-bold" v-else>￥{{ item.goodsPrice }}</text>
|
||||
<text class="text-25 ml-35">x{{ item.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="text-35 font-bold flex-1 text-main" v-if="order.type === 0">￥{{
|
||||
parseFloat(item.sku.values) * item.num
|
||||
}}
|
||||
</text>
|
||||
<text class="text-35 font-bold flex-1 text-main" v-else>￥{{
|
||||
parseFloat(item.goodsPrice) * item.num
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="order.type === 1">
|
||||
<p class="text-35 font-bold mb-25">服务详情</p>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="考察对象" v-if="selfProduct.type === 0">
|
||||
<p style="margin-bottom: .5rem" v-for="(item, index) in selfProduct.contentList" :key="index">
|
||||
{{ item.name }}({{
|
||||
item.code
|
||||
}})--{{ item.addressRegion.province.name }}{{
|
||||
item.addressRegion.city.name
|
||||
}}{{ item.addressRegion.area.name }}{{ item.address }}</p>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="考察产品" v-else>
|
||||
<p style="margin-bottom: .5rem" v-for="(item, index) in selfProduct.contentList" :key="index">
|
||||
{{ item.name }}--{{ item.addressRegion.province.name }}{{
|
||||
item.addressRegion.city.name
|
||||
}}{{ item.addressRegion.area.name }}{{ item.address }}</p>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接收文件电子邮箱">
|
||||
<span>{{ selfProduct.email }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接收文件微信">
|
||||
<span>{{ selfProduct.wechat }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接收文件寄件地址">
|
||||
<span v-if="selfProduct.receiveAddressRegion.province">{{
|
||||
selfProduct.receiveAddressRegion.province.name
|
||||
}}{{
|
||||
selfProduct.receiveAddressRegion.city.name
|
||||
}}{{ selfProduct.receiveAddressRegion.area.name }}{{ selfProduct.receiveAddress }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="申请人">
|
||||
<span>{{ selfProduct.requestName }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="业务联系人">
|
||||
<span>{{ selfProduct.contactName }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="业务联系方式">
|
||||
<span>{{ selfProduct.contact }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "goods",
|
||||
props: {
|
||||
goods: Array,
|
||||
order: Object,
|
||||
selfProduct: Object,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
getGoodsImage(item) {
|
||||
if (!item) return ''
|
||||
if (item.sku && item.sku.image) return item.sku.image
|
||||
if (item.goods && item.goods.cover) return item.goods.cover
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view>
|
||||
<div class="font-bold">
|
||||
<span>订单编号: {{ orderInfo.orderNo }}</span>
|
||||
<span class="ml-20 text-main" v-if="orderInfo.orderStatus > 1">(已发货)</span>
|
||||
</div>
|
||||
<div class="font-bold my-25">订单总额: {{ orderInfo.amount }}元</div>
|
||||
<div class="text-main text-25 my-25" style="line-height: 1.9;">
|
||||
<p>情况1、如遇有大额多车次，多批次交易，应涉及进度款，如100万合同，前期到两车，可以申请进度款；</p>
|
||||
<p>情况2、如果单次可一次性送达则实行全款。</p>
|
||||
<p>情况3、如为定制产品，双方协商可给协商比例的进度款。</p>
|
||||
<p>情况4、有可能有剩余款项，交易完成可申请平台退款。</p>
|
||||
<p>情况5、有可能实际发货量大于订货量，货款不足。</p>
|
||||
</div>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item label="支付类型" required>
|
||||
<el-select v-model="payInfo.type" @change="changeType">
|
||||
<el-option
|
||||
v-for="item in payTypeList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:disabled="(!['预付款', '货到付款', '全款'].includes(item) && orderInfo.payStatus === 0)
|
||||
|| (['预付款', '货到付款', '全款'].includes(item) && orderInfo.payStatus > 0)"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="payInfo.type" required>
|
||||
<el-input v-model="payInfo.amount" placeholder="请输入金额"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="payInfo.remark"/>
|
||||
</el-form-item>
|
||||
<template v-if="[0, 1].includes(orderInfo.orderStatus)">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否发货">
|
||||
<el-radio-group v-model="payInfo.isExpress"
|
||||
:disabled="['货到付款', '全款'].includes(payInfo.type)">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="物流公司" required>-->
|
||||
<!-- <el-input v-model="payInfo.expressName" placeholder="请输入物流公司"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="物流单号" required>-->
|
||||
<!-- <el-input v-model="payInfo.expressNo" placeholder="请输入物流单号"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
<el-form-item label="凭证" v-if="!payInfo.isExpress">
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="payInfo.photos"
|
||||
@afterRead="afterRead($event, 'photos')"
|
||||
@delete="deletePic($event, 'photos')"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
<!-- <vk-data-upload v-model="payInfo.photos"></vk-data-upload>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="凭证" v-else required>
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="payInfo.expressPhoto"
|
||||
@afterRead="afterRead($event, 'expressPhoto')"
|
||||
@delete="deletePic($event, 'expressPhoto')"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
<!-- <vk-data-upload v-model="payInfo.expressPhoto"></vk-data-upload>-->
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24" class="text-center">
|
||||
<el-button type="primary" size="mini" @click="setPayList">提交</el-button>
|
||||
<el-button type="warning" size="mini" @click="close">取消
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "makePay",
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
payTypeList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
payInfo: {
|
||||
orderId: this.info._id,
|
||||
amount: null,
|
||||
type: null,
|
||||
remark: '',
|
||||
buyerRemark: '',
|
||||
photos: [],
|
||||
payerUid: null,
|
||||
hasPaid: false,
|
||||
paidVoucher: '',
|
||||
paidAt: '',
|
||||
sellerConfirm: false,
|
||||
confirmAt: '',
|
||||
buyerUid: this.info.uid,
|
||||
sellerUid: this.info.sellerUid,
|
||||
status: 0,
|
||||
buyerRefuse: false,
|
||||
refuseReason: null,
|
||||
buyerPhotos: [],
|
||||
expressPhoto: [],
|
||||
isExpress: false,
|
||||
expressName: null,
|
||||
expressNo: null,
|
||||
},
|
||||
orderInfo: {
|
||||
payStatus: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("close")
|
||||
},
|
||||
async getOrderInfo() {
|
||||
this.orderInfo = await vk.callFunction({
|
||||
url: 'client/order/kh/getInfo',
|
||||
data: {
|
||||
id: this.info._id
|
||||
}
|
||||
})
|
||||
},
|
||||
async setPayList() {
|
||||
if (!this.payInfo.type) return this.$message({
|
||||
type: 'error',
|
||||
message: '请选择支付类型'
|
||||
})
|
||||
if (!this.payInfo.amount) return this.$message({
|
||||
type: 'error',
|
||||
message: '请输入支付金额'
|
||||
})
|
||||
if (this.payInfo.isExpress && this.payInfo.expressPhoto.length === 0) return this.$message({
|
||||
type: 'error',
|
||||
message: '请上传凭证'
|
||||
})
|
||||
// if (this.payInfo.isExpress && !this.payInfo.expressName) return this.$message({
|
||||
// type: 'error',
|
||||
// message: '请输入物流公司'
|
||||
// })
|
||||
// if (this.payInfo.isExpress && !this.payInfo.expressNo) return this.$message({
|
||||
// type: 'error',
|
||||
// message: '请输入物流单号'
|
||||
// })
|
||||
if (this.payInfo.photos && this.payInfo.photos.length > 0) this.payInfo.photos = this.payInfo.photos.map(i => i.url)
|
||||
if (this.payInfo.expressPhoto && this.payInfo.expressPhoto.length > 0) this.payInfo.expressPhoto = this.payInfo.expressPhoto.map(i => i.url)
|
||||
if (this.payInfo.isExpress) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '发货状态一旦确定无法修改，请谨慎操作',
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/makePay',
|
||||
title: '请求中...',
|
||||
data: {payInfo: this.payInfo}
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '支付单创建成功'
|
||||
})
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/makePay',
|
||||
title: '请求中...',
|
||||
data: {payInfo: this.payInfo}
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '支付单创建成功'
|
||||
})
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
changeType() {
|
||||
this.payInfo.isExpress = ['货到付款', '全款'].includes(this.payInfo.type)
|
||||
},
|
||||
afterRead({file}, field) {
|
||||
file.forEach(item => {
|
||||
console.log(item)
|
||||
uniCloud.uploadFile({
|
||||
filePath: item.url,
|
||||
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + item.name,
|
||||
success: ({fileID}) => {
|
||||
uniCloud.getTempFileURL({
|
||||
fileList: [fileID]
|
||||
}).then(res => {
|
||||
this.payInfo[field].push({url: res.fileList[0].tempFileURL})
|
||||
console.log(this.payInfo[field])
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deletePic({index}, field) {
|
||||
this.payInfo[field].splice(index, 1)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getOrderInfo()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="margin-bottom: 16px; padding: 12px; background: #fff8e8; color: #8a5a00; line-height: 1.7;">
|
||||
<view>服务提供方（卖家）：请于系统确认支付方已依照协议或约定支付对应订单款项后，再启动对应服务。申请款项付款方在系统端完成划款授权确认操作后，款项到账时间约为工作日T+1，请届时查询确认。</view>
|
||||
<view style="margin-top: 8px;">服务需求方（买家）：请于依照交易规则和协议完成对应服务验收后，再在系统端完成对应申请款项的授权确认操作，系统默认确认时限为72小时（含工作日，届时系统仅提供信息提醒服务），请及时完成该项确认。若您届时未确认且未提出正当异议，系统将默认您已收货或同意支付申请。</view>
|
||||
</view>
|
||||
<view class="rounded shadow p-10 mb-40" v-for="(item, index) in payList" :key="index">
|
||||
<view class="mb-10">支付类目: {{ item.type }}</view>
|
||||
<view class="mb-10">支付金额: {{ item.amount }}元</view>
|
||||
<view class="mb-10">
|
||||
<template v-if="!item.buyerRefuse">
|
||||
<text v-if="item.isSeller && !item.hasPaid">待买方支付</text>
|
||||
<view v-else-if="item.paidVoucher">
|
||||
<el-image :src="item.paidVoucher[0]" style="width: 120rpx; height: 120rpx" fit="cover"
|
||||
:preview-src-list="item.paidVoucher"/>
|
||||
</view>
|
||||
<view v-else-if="!item.paidVoucher">
|
||||
<text>未上传凭证</text>
|
||||
</view>
|
||||
</template>
|
||||
<text v-else class="text-main">买家已拒绝: {{ item.refuseReason }}</text>
|
||||
</view>
|
||||
<view class="mb-10">
|
||||
<view>物流凭证:</view>
|
||||
<el-image v-for="(photo, photoIndex) in item.expressPhoto" :key="photoIndex" :src="photo"
|
||||
style="width: 120rpx; height: 120rpx" fit="cover"
|
||||
:preview-src-list="item.expressPhoto"/>
|
||||
</view>
|
||||
<view class="mb-10">备注: {{ item.remark ? item.remark : '无' }}</view>
|
||||
<view class="mb-10">买家备注: {{ item.buyerRemark ? item.buyerRemark : '无' }}</view>
|
||||
<view class="mb-10">图片:
|
||||
<template v-if="item.photos && item.photos.length > 0">
|
||||
<el-image v-for="(photo, photoIndex) in item.photos" :key="photoIndex" :src="photo"
|
||||
style="width: 80px; height: 80px" fit="cover"
|
||||
:preview-src-list="item.photos"/>
|
||||
</template>
|
||||
<text v-else>无</text>
|
||||
</view>
|
||||
<view class="mb-10">状态:
|
||||
<text v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</text>
|
||||
<text v-if="!item.sellerConfirm && item.hasPaid">待确认收款</text>
|
||||
<text v-if="item.sellerConfirm && item.hasPaid">已完成</text>
|
||||
</view>
|
||||
<view v-if="!item.buyerRefuse" class="flex justify-end items-center">
|
||||
<view class="mx-15">
|
||||
<u-button plain type="primary" size="mini" @click="showPay(item)"
|
||||
v-if="item.status === 0 && item.isBuyer && !item.hasPaid">上传支付凭证
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="mx-15">
|
||||
<u-button type="primary" size="mini" class="mx-20" @click="confirmPay(item)"
|
||||
v-if="item.hasPaid && item.isSeller && !item.sellerConfirm">
|
||||
确认收款
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="mx-15">
|
||||
<u-button plain type="primary" size="mini" class="mx-20" @click="paidRefuse(item)"
|
||||
v-if="item.isBuyer && item.status === 0 && item.paidVoucher.length === 0">
|
||||
驳回
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<span>我方状态:</span>
|
||||
<template v-if="item.isSeller">
|
||||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||||
<span v-if="!item.sellerConfirm && item.hasPaid">待确认收款</span>
|
||||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||||
</template>
|
||||
<template v-if="item.isBuyer">
|
||||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||||
<span v-if="!item.sellerConfirm && item.hasPaid">完成支付</span>
|
||||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||||
</template>
|
||||
</view>
|
||||
<view>
|
||||
<span>对方状态:</span>
|
||||
<!-- 自己是卖家则对方是买家-->
|
||||
<template v-if="item.isSeller">
|
||||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||||
<span v-if="!item.sellerConfirm && item.hasPaid">完成支付</span>
|
||||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||||
</template>
|
||||
<template v-if="item.isBuyer">
|
||||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||||
<span v-if="!item.sellerConfirm && item.hasPaid">待确认收款</span>
|
||||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<u-button @click="close()">关闭</u-button>
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="100%" append-to-body="">
|
||||
<template v-if="dialogVisible && dialogType === 'do-pay'">
|
||||
<div class="font-bold">支付金额: {{ payInfo.amount }}元</div>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item label="支付凭证" required>
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="payInfo.paidVoucher"
|
||||
@afterRead="afterRead($event, 'paidVoucher')"
|
||||
@delete="deletePic($event, 'paidVoucher')"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="payInfo.buyerRemark"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片">
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="payInfo.buyerPhotos"
|
||||
@afterRead="afterRead($event, 'buyerPhotos')"
|
||||
@delete="deletePic($event, 'buyerPhotos')"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :text="24" class="text-center">
|
||||
<el-button type="primary" size="mini" @click="uploadPayVoucher">提交</el-button>
|
||||
<el-button type="warning" size="mini" @click="dialogVisible = false">取消
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExpressInfo from "./expressInfo.vue";
|
||||
import Goods from "./goods.vue";
|
||||
import SetExpress from "./setExpress.vue";
|
||||
import MakePay from "./makePay.vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "payList",
|
||||
components: {MakePay, SetExpress, Goods, ExpressInfo},
|
||||
props: {
|
||||
payList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
dialogTitle: '',
|
||||
payInfo: {
|
||||
amount: '',
|
||||
paidVoucher: [],
|
||||
buyerRemark: '',
|
||||
buyerPhotos: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPay(item) {
|
||||
this.payInfo = item;
|
||||
this.payInfo.amount = ''
|
||||
this.payInfo.paidVoucher = []
|
||||
this.payInfo.buyerRemark = ''
|
||||
this.payInfo.buyerPhotos = []
|
||||
this.dialogTitle = '支付'
|
||||
this.dialogType = 'do-pay';
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
async confirmPay({_id, type}) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/paidConfirm',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id: _id
|
||||
}
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '确认成功'
|
||||
})
|
||||
if (['尾款', '货到付款'].includes(type)) this.$emit('refresh', '4')
|
||||
else this.$emit('refresh')
|
||||
},
|
||||
paidRefuse({_id}) {
|
||||
uni.showModal({
|
||||
title: '请输入驳回理由',
|
||||
content: '',
|
||||
editable: true,
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/payRefuse',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id: _id,
|
||||
refuseReason: res.content,
|
||||
}
|
||||
})
|
||||
this.$emit('refresh')
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '驳回成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async uploadPayVoucher() {
|
||||
if (this.payInfo.paidVoucher.length === 0) return this.$message.error('请上传支付凭证')
|
||||
if (this.payInfo.paidVoucher && this.payInfo.paidVoucher.length > 0) this.payInfo.paidVoucher = this.payInfo.paidVoucher.map(i => i.url)
|
||||
if (this.payInfo.buyerPhotos && this.payInfo.buyerPhotos.length > 0) this.payInfo.buyerPhotos = this.payInfo.buyerPhotos.map(i => i.url)
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/uploadPayVoucher',
|
||||
title: '请求中...',
|
||||
data: this.payInfo
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '上传成功'
|
||||
})
|
||||
this.$emit('refresh')
|
||||
this.dialogVisible = false
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
afterRead({file}, field) {
|
||||
file.forEach(item => {
|
||||
uniCloud.uploadFile({
|
||||
filePath: item.url,
|
||||
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + item.name,
|
||||
success: ({fileID}) => {
|
||||
uniCloud.getTempFileURL({
|
||||
fileList: [fileID]
|
||||
}).then(res => {
|
||||
this.payInfo[field].push({url: res.fileList[0].tempFileURL})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deletePic({index}, field) {
|
||||
this.payInfo[field].splice(index, 1)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item label="客户信息" required>
|
||||
<p>收件人: {{ info.name }}</p>
|
||||
<p>收件人联系方式: {{ info.phone }}</p>
|
||||
<p>收件地址: {{ info.addressRegion.province.name }}{{ info.addressRegion.city.name }}{{ info.addressRegion.area.name }}{{ info.addressDetail }}</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="物流公司" required>
|
||||
<el-input v-model="expressName" placeholder="请输入物流公司"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="物流单号" required>
|
||||
<el-input v-model="expressNo" placeholder="请输入物流单号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发货单" required>
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="expressPhotoList"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="remark" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
<div class="mt-20 flex justify-center items-center text-center">
|
||||
<el-button type="primary" size="small" plain @click.native="cancel">取消</el-button>
|
||||
<el-button type="primary" size="small" @click.native="confirm">确定</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import md5 from "js-md5";
|
||||
|
||||
export default {
|
||||
name: "setExpress",
|
||||
props: {
|
||||
id: Number | String,
|
||||
info: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expressName: null,
|
||||
expressNo: null,
|
||||
remark: null,
|
||||
expressPhoto: [],
|
||||
expressPhotoList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterRead({file}) {
|
||||
file.forEach(item => {
|
||||
const suffix = item.name.split('.').pop()
|
||||
uniCloud.uploadFile({
|
||||
filePath: item.url,
|
||||
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
|
||||
success: ({fileID}) => {
|
||||
uniCloud.getTempFileURL({
|
||||
fileList: [fileID]
|
||||
}).then(res => {
|
||||
this.expressPhotoList.push({url: res.fileList[0].tempFileURL})
|
||||
this.expressPhoto.push(res.fileList[0].tempFileURL)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deletePic({index}) {
|
||||
this.expressPhoto.splice(index, 1)
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
cancel() {
|
||||
this.expressName = null
|
||||
this.expressNo = null
|
||||
this.remark = null
|
||||
this.expressPhoto = []
|
||||
this.$emit('close')
|
||||
},
|
||||
async confirm() {
|
||||
if (!this.expressName) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写物流公司'
|
||||
})
|
||||
if (!this.expressNo) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写物流单号'
|
||||
})
|
||||
if (this.expressPhoto.length === 0) return this.$message({
|
||||
type: 'error',
|
||||
message: '请上传发货单'
|
||||
})
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/setExpress',
|
||||
data: {
|
||||
id: this.id,
|
||||
expressName: this.expressName,
|
||||
expressNo: this.expressNo,
|
||||
remark: this.remark,
|
||||
expressPhoto: this.expressPhoto
|
||||
}
|
||||
})
|
||||
this.$emit('close')
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '发货成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item label="退款原因" required>
|
||||
<el-input v-model="refundReason" placeholder="请输入退款原因"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片">
|
||||
<u-upload
|
||||
multiple
|
||||
:fileList="refundPhotos"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
></u-upload>
|
||||
</el-form-item>
|
||||
<div class="mt-20 flex justify-center items-center text-center">
|
||||
<el-button type="primary" size="small" plain @click.native="cancel">取消</el-button>
|
||||
<el-button type="primary" size="small" @click.native="confirm">确定</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import md5 from "js-md5";
|
||||
|
||||
export default {
|
||||
name: "setRefund",
|
||||
props: {
|
||||
id: Number | String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refundReason: null,
|
||||
refundPhotos: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterRead({file}) {
|
||||
file.forEach(item => {
|
||||
const suffix = item.name.split('.').pop()
|
||||
uniCloud.uploadFile({
|
||||
filePath: item.url,
|
||||
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
|
||||
success: ({fileID}) => {
|
||||
uniCloud.getTempFileURL({
|
||||
fileList: [fileID]
|
||||
}).then(res => {
|
||||
this.refundPhotos.push({url: res.fileList[0].tempFileURL})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deletePic({index}) {
|
||||
this.refundPhotos.splice(index, 1)
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
cancel() {
|
||||
this.refundReason = null
|
||||
this.refundPhotos = []
|
||||
this.close()
|
||||
},
|
||||
async confirm() {
|
||||
if (!this.refundReason) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写退款原因'
|
||||
})
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/order/kh/refund',
|
||||
data: {
|
||||
id: this.id,
|
||||
refundReason: this.refundReason,
|
||||
refundPhotos: this.refundPhotos,
|
||||
}
|
||||
}).catch(err => false)
|
||||
if (res) {
|
||||
this.$emit('close')
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '平台将在2个工作日内审核，请您耐心等待'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view>
|
||||
<el-table :data="tableData.rows" style="width: 100%" border stripe>
|
||||
<el-table-column prop="orderNo" label="订单号" width="200"/>
|
||||
<el-table-column label="订单类型">
|
||||
<template v-slot="{ row }">
|
||||
<span>{{ row.type === 0 ? '普通订单' : '金久信自营订单' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品列表" width="250">
|
||||
<template v-slot="{ row }">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view v-for="(item, index) in row.goods" :key="index"
|
||||
class="flex justify-start items-start">
|
||||
<image :src="item.goodsCover" class="goods-cover" v-if="row.type === 0"/>
|
||||
<view class="ml-20 flex flex-col justify-start items-start">
|
||||
<text class="text-main font-bold">{{ item.goodsName }}</text>
|
||||
<text class="mt-20">￥{{ item.goodsPrice }}</text>
|
||||
<text class="mt-20">x{{ item.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="订单金额"/>
|
||||
<el-table-column prop="payAmount" label="支付金额"/>
|
||||
<el-table-column label="订单状态">
|
||||
<template v-slot="{ row }">
|
||||
<span v-if="row.orderStatus === 0">待支付</span>
|
||||
<span v-if="row.orderStatus === 1">已支付</span>
|
||||
<span v-if="row.orderStatus === 2">待收货</span>
|
||||
<span v-if="row.orderStatus === 3">已完成</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="_add_time_str" label="下单时间"/>
|
||||
<el-table-column label="操作">
|
||||
<template v-slot="{ row }">
|
||||
<text v-if="row.orderStatus === 0" class="text-main pointer" @click="repay(row)">去支付</text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<view class="text-center mt-20">
|
||||
<el-pagination
|
||||
:page-size="pageSize"
|
||||
@current-change="getOrderList"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.total">
|
||||
</el-pagination>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "shopOrder",
|
||||
props: {
|
||||
tableData: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
activeIndex: 0,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async repay(row) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/resetOrderNo',
|
||||
data: {
|
||||
id: row._id,
|
||||
}
|
||||
})
|
||||
vk.navigateTo({
|
||||
url: `/pages/shop/pay?id=${row._id}`
|
||||
})
|
||||
},
|
||||
getOrderList(index){
|
||||
this.$emit('change-page', index)
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.main-wrap {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
|
||||
.left-wrap {
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
left: -240px;
|
||||
top: 0;
|
||||
|
||||
view {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #a92924;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-cover {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,310 @@
|
||||
<template> <!-- 商品详情 -->
|
||||
<view class="wrap">
|
||||
<!-- 吸顶 -->
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle :title="info.name"></uititle>
|
||||
</u-sticky>
|
||||
<!-- 轮播图 -->
|
||||
<view class="layout layout-swiper" style="height: 750rpx">
|
||||
<u-swiper
|
||||
:list="info.album"
|
||||
keyName="image"
|
||||
:autoplay="true"
|
||||
circular
|
||||
height="750rpx"
|
||||
></u-swiper>
|
||||
</view>
|
||||
<!-- 信息 -->
|
||||
<view class="layout layout-detail bg-white">
|
||||
<view class="price flex justify-between align-center">
|
||||
<view class="price-left">
|
||||
<text class="mr-10">零售价: </text>
|
||||
<text class="current">¥{{ info.amount }}</text>
|
||||
</view>
|
||||
<text>已售: {{ info.sales }}</text>
|
||||
</view>
|
||||
<view class="title">
|
||||
{{ info.name }}
|
||||
</view>
|
||||
<view class="mt-20 flex justify-start items-center text-25">
|
||||
<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 text-25" v-if="info.ensureService">
|
||||
<like theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
||||
<text class="ml-10">{{ info.ensureService }}</text>
|
||||
</view>
|
||||
<view class="text-25 mt-20 text-gray">{{ info.desc }}</view>
|
||||
</view>
|
||||
<view class="layout layout-parse bg-white" v-if="info.video">
|
||||
<view class="parse-title">视频介绍</view>
|
||||
<video :src="info.video" controls style="width: 100%; height: 400rpx" autoplay=""></video>
|
||||
</view>
|
||||
<!-- 详情 -->
|
||||
<view class="layout layout-parse bg-white">
|
||||
<view class="parse-title">商品介绍</view>
|
||||
<u-parse :content="info.content"></u-parse>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<view class="fiexd-bottom flex justify-between align-center">
|
||||
<view class="home flex direction-column align-center" @click="homeLink">
|
||||
<view class="icon">
|
||||
<image class="full" src="/static/img/home.png" mode=""></image>
|
||||
</view>
|
||||
<view class="text">首页</view>
|
||||
</view>
|
||||
<view class="home flex direction-column align-center ml-20 pos-r" @click="$jump('/pages/shop/cart')">
|
||||
<view class="icon">
|
||||
<u-icon name="shopping-cart" size="24" color="#A92924"></u-icon>
|
||||
</view>
|
||||
<text class="cartNum" v-if="cartNum > 0">{{ cartNum }}</text>
|
||||
<view class="text">购物车</view>
|
||||
</view>
|
||||
<view class="home flex direction-column align-center ml-20" @click="call">
|
||||
<view class="icon">
|
||||
<image class="full" src="/static/img/service.png" mode=""></image>
|
||||
</view>
|
||||
<view class="text">客服</view>
|
||||
</view>
|
||||
<view class="flex-1"></view>
|
||||
<view class="shop-btn" @click="show = true">加入购物车</view>
|
||||
<view class="shop-btn full-btn m-left-30" @click="show = true">立即购买</view>
|
||||
</view>
|
||||
<u-popup :show="show" mode="bottom" round="15" closeable @close="show = false">
|
||||
<view class="p-50">
|
||||
<view class="flex justify-start items-start">
|
||||
<u-image
|
||||
:src="info.sku.find(item => item._index === selectedSku) ? info.sku.find(item => item._index === selectedSku).image : info.cover"
|
||||
width="200rpx" height="200rpx" radius="10rpx"></u-image>
|
||||
<view class="ml-20 font-bold flex justify-start items-start flex-col">
|
||||
<text>{{ info.name }}</text>
|
||||
<text class="text-main">￥{{ info.sku.find(item => item._index === selectedSku).values }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-start items-start mt-20 flex-wrap">
|
||||
<view v-for="(item, index) in info.sku" :key="index" class="mr-15 mb-15">
|
||||
<u-tag type="primary" :plain="selectedSku !== item._index" :text="item.label"
|
||||
@click="selectedSku = item._index"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-bold my-20">数量</view>
|
||||
<u-number-box v-model="num" class="pb-20"/>
|
||||
<view class="flex justify-center items-center pt-20 border-top">
|
||||
<view class="shop-btn" @click="addToCart">加入购物车</view>
|
||||
<view class="shop-btn full-btn m-left-30" @click="newOrder">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from '@/components/common/title'
|
||||
import cmsearch from '@/components/common/search'
|
||||
import cmempty from '@/components/common/empty'
|
||||
import {Transporter, Like} from '@icon-park/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uititle,
|
||||
cmsearch,
|
||||
cmempty,
|
||||
Transporter,
|
||||
Like,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
name: ''
|
||||
},
|
||||
num: 1,
|
||||
selectedSku: null,
|
||||
show: false,
|
||||
cartNum: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
homeLink() {
|
||||
vk.navigateTo('pages/index/index')
|
||||
},
|
||||
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() {
|
||||
this.show = false
|
||||
vk.callFunction({
|
||||
url: 'client/cart/kh/add',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
skuId: this.selectedSku,
|
||||
num: this.num,
|
||||
},
|
||||
success: (res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '添加成功'
|
||||
})
|
||||
this.getCartNum()
|
||||
}
|
||||
})
|
||||
},
|
||||
async newOrder() {
|
||||
this.show = false
|
||||
const {data} = await vk.callFunction({
|
||||
url: 'client/order/kh/add',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
goodsId: this.id,
|
||||
skuId: this.selectedSku,
|
||||
num: this.num,
|
||||
type: 0
|
||||
}
|
||||
})
|
||||
vk.navigateTo({
|
||||
url: `/pages/shop/pay?id=${data}`
|
||||
})
|
||||
},
|
||||
getCartNum() {
|
||||
vk.callFunction({
|
||||
url: 'client/cart/kh/getNum',
|
||||
}).then(({data}) => {
|
||||
this.cartNum = data
|
||||
})
|
||||
},
|
||||
call(){
|
||||
window.open('tel:400-686-5559')
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id
|
||||
this.getInfo(id)
|
||||
this.getCartNum()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.layout-swiper {
|
||||
height: 600rpx;
|
||||
}
|
||||
|
||||
.layout-detail {
|
||||
margin: 20rpx 30rpx 10rpx;
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.price {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.current {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #A92924;
|
||||
}
|
||||
|
||||
.cost {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-parse {
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.parse-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.fiexd-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 690rpx;
|
||||
height: 120rpx;
|
||||
padding: 0 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.home {
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-btn {
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
color: #A92924;
|
||||
border: 1px solid #A92924;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.full-btn {
|
||||
color: #ffffff;
|
||||
background: #A92924;
|
||||
}
|
||||
|
||||
|
||||
.cartNum {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: #bf2b28;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 25rpx;
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
border: 1px solid #bf2b28;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,784 @@
|
||||
<template> <!-- 订单列表 -->
|
||||
<view class="wrap">
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle title="订单管理"></uititle>
|
||||
</u-sticky>
|
||||
<u-subsection :list="subsectionList" :current="subsectionActive" activeColor="#A92924"
|
||||
@change="sectionChange" fontSize="16"></u-subsection>
|
||||
<view class="tab-box">
|
||||
<view class="item" :class="{active: activeName === 'all'}" @click="handTab('all')">全部</view>
|
||||
<view class="item" :class="{active: activeName === 0}" @click="handTab(0)">待付款</view>
|
||||
<view class="item" :class="{active: activeName === 1}" @click="handTab(1)">待发货</view>
|
||||
<view class="item" :class="{active: activeName === 2}" @click="handTab(2)">待收货</view>
|
||||
<view class="item" :class="{active: activeName === 5}" @click="handTab(5)">待退款</view>
|
||||
<view class="item" :class="{active: activeName === 4}" @click="handTab(4)">已完成</view>
|
||||
<view class="item" :class="{active: activeName === 6}" @click="handTab(6)">退款成功</view>
|
||||
<view class="item" :class="{active: activeName === 7}" @click="handTab(7)">退款失败</view>
|
||||
</view>
|
||||
<view class="p-20 flex justify-start items-center">
|
||||
<view class="mr-15">
|
||||
<u-icon name="arrow-down" label-pos="left" :label="typeStr" @click="showTypeFilter = true"/>
|
||||
</view>
|
||||
<u-search v-model="keyword" placeholder="请输入订单号" @blur="query(1)" @custom="query(1)"
|
||||
@clear="query(1)"/>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<!-- 1 -->
|
||||
<view class="item bg-white" v-for="(item, index) in tableData.rows" :key="index">
|
||||
<view class="state">
|
||||
<view class="no">{{ item.orderNo }}</view>
|
||||
<view class="bage" v-if="item.signMethod !== 1">{{
|
||||
orderStatusList[item.orderStatus]
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-15 text-25 text-gray flex justify-start items-center">
|
||||
<text>{{ orderTypeList[item.type] }}</text>
|
||||
<text class="text-25 text-gray" v-if="item.type === 1">({{
|
||||
item.subType === 0 ? '企业' : '产品'
|
||||
}})
|
||||
</text>
|
||||
</view>
|
||||
<text class=" text-25 text-main" v-if="item.type === 3">(过期时间:{{
|
||||
item.upgradeExpiredAt
|
||||
}})
|
||||
</text>
|
||||
<text class=" text-25 text-main" v-if="item.type === 8 && item.spot && item.spot.topExpiredAt">过期时间:{{
|
||||
dayjs(item.spot.topExpiredAt).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}({{
|
||||
item.goods[0].goodsId === '-1' ? '全国' : provincesData.find(province => parseInt(province.code) === parseInt(item.goods[0].goodsId)).name
|
||||
}})
|
||||
</text>
|
||||
<view class="mt-15 text-25 text-gray">{{ item._add_time_str }}</view>
|
||||
<text class="mt-15 text-25 text-main" v-if="item.type > 3 && item.payList">
|
||||
最新支付状态：{{ item.buyerStatusStr }}
|
||||
</text>
|
||||
<text class="mt-15 text-25 text-main" v-if="item.type < 4 && item.orderStatus === 7">
|
||||
退款拒绝原因：{{ item.refundRefuseReason }}
|
||||
</text>
|
||||
<template v-if="item.type === 0">
|
||||
<view class="p-20 mb-20 flex justify-start items-start" v-for="(goods, goodsIndex) in item.goods"
|
||||
:key="goodsIndex">
|
||||
<u-image :src="getGoodsImage(goods)" width="150rpx" height="150rpx" v-if="getGoodsImage(goods)"/>
|
||||
<view class="flex flex-col justify-start items-start ml-20 text-25">
|
||||
<text class="font-bold mb-15 text-28">{{ goods.goodsName }}</text>
|
||||
<text class="text-gray" v-if="item.type === 0 && goods.sku">{{ goods.sku.label }}</text>
|
||||
<text class=" font-bold text-main" v-if="item.type === 0 && goods.sku">￥{{
|
||||
goods.sku.values
|
||||
}}
|
||||
</text>
|
||||
<text class=" font-bold flex-1" v-else>￥{{ goods.goodsPrice }}</text>
|
||||
<text class="">x{{ goods.num }}</text>
|
||||
</view>
|
||||
<text class="text-35 font-bold flex-1 text-main" v-if="item.type === 0 && goods.sku">￥{{
|
||||
parseFloat(goods.sku.values) * goods.num
|
||||
}}
|
||||
</text>
|
||||
<text class="text-35 font-bold flex-1 text-main" v-else>￥{{
|
||||
parseFloat(goods.goodsPrice) * goods.num
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="tool" v-if="item.type < 4 || (item.type > 6 && item.type !== 14)">
|
||||
<view class="price">
|
||||
<text class="mr-10" v-if="item.orderStatus !== 10">总金额:</text>
|
||||
<text v-else class="red mr-10">待报价:</text>
|
||||
<template v-if="item.orderStatus !== 10">
|
||||
<text
|
||||
:class="[parseFloat(item.offAmount) !== parseFloat(item.amount) ? 'text-line-through text-gray': 'red']">
|
||||
￥{{ item.amount ? parseFloat(item.amount).toFixed(2) : '' }}
|
||||
</text>
|
||||
<text class="red"
|
||||
v-if="parseFloat(item.offAmount) !== parseFloat(item.amount)">
|
||||
￥{{ item.offAmount }}
|
||||
</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="status">
|
||||
<view class="icon">
|
||||
<img v-if="item.orderStatus === 0" src="/static/images/order/toBePaid.png"
|
||||
alt=""/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operate">
|
||||
<template v-if="(item.type > 3 && item.type < 7) || [14, 15].includes(item.type)">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" class="btn-buy pointer" @click="showOtherUser(item)">
|
||||
联系交易方
|
||||
</u-button>
|
||||
</view>
|
||||
<template v-if="item.type > 3 && item.orderStatus < 3 && item.isSeller">
|
||||
<template
|
||||
v-if="!item.payList || !['尾款', '货到付款'].includes(item.payList.type) || (['尾款', '货到付款'].includes(item.payList.type) && item.payList.buyerRefuse)">
|
||||
<view class="mx-15">
|
||||
<u-button type="primary" size="mini" class="pointer"
|
||||
@click="makePayList(item)">
|
||||
创建支付单
|
||||
</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="item.type > 3 && item.payStatus > 0">
|
||||
<view class="mx-15">
|
||||
<u-button type="warning" size="mini" class="pointer"
|
||||
@click="showPayList(item)">
|
||||
查看支付单
|
||||
</u-button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.contractId">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" class="btn-buy pointer"
|
||||
@click="viewContract(item.contractId)">
|
||||
查看合同
|
||||
</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="[0, 1, 2, 3, 7, 8, 9].includes(item.type)">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" type="primary"
|
||||
v-if="[0, 1].includes(item.type)"
|
||||
@click="showGoods(item)">商品列表
|
||||
</u-button>
|
||||
</view>
|
||||
<template v-if="item.orderStatus === 0">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" type="primary" class="btn-close pointer"
|
||||
@click="navTo(`/pages/shop/pay?id=${item._id}`)"
|
||||
>去支付
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" class="pointer" type="info"
|
||||
@click="cancel(item)"
|
||||
>取消订单
|
||||
</u-button>
|
||||
</view>
|
||||
<template v-if="item.orderStatus === 4">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini"
|
||||
@click="showServicePhone()">客服电话
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini"
|
||||
@click="showServiceQR()">客服二维码
|
||||
</u-button>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="item.orderStatus >= 2 && item.type === 0">
|
||||
<view class="mx-15">
|
||||
<u-button plain size="mini" class="btn-buy pointer"
|
||||
@click="showExpressInfo(item)">
|
||||
物流信息
|
||||
</u-button>
|
||||
</view>
|
||||
<template v-if="item.isBuyer && item.orderStatus === 2">
|
||||
<view class="mx-15">
|
||||
<u-button size="mini" type="success"
|
||||
@click="confirmExpress(item._id)">
|
||||
确认收货
|
||||
</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<view class="mx-15">
|
||||
<u-button size="mini" type="success" v-if="item.orderStatus === 11 && item.isSeller"
|
||||
@click.native="changeOrderStatus(item._id, 3)">已完成
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="mx-15">
|
||||
<u-button size="mini" type="success" v-if="item.orderStatus === 3 && item.isBuyer"
|
||||
@click.native="changeOrderStatus(item._id, 4)">确认完成
|
||||
</u-button>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="item.orderStatus === 1 && item.isSeller && item.type === 0">
|
||||
<u-button plain size="mini" type="primary" @click="setExpress(item)">发货</u-button>
|
||||
</view>
|
||||
<view class="mx-15"
|
||||
v-if="([1, 2, 4, 7, 8, 9].includes(item.orderStatus)
|
||||
&& ((item.type > 3 && item.hasPay && item.isBuyer)
|
||||
|| (item.type < 3 && [1, 2, 3, 4, 7, 8, 9].includes(item.orderStatus) && item.isBuyer)
|
||||
))">
|
||||
<u-button plain size="mini" class="btn-close pointer"
|
||||
@click="showRefund(item)">申请退款
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="100%">
|
||||
<make-pay v-if="dialogVisible && clickedInfo && dialogType === 'create'" :info="clickedInfo"
|
||||
@close="dialogVisible = false;query(1)" :pay-type-list="payTypeList"/>
|
||||
<pay-list v-else-if="dialogVisible && dialogType === 'pay-list'" :pay-list="payList"
|
||||
@refresh="payRefresh" @close="dialogVisible = false"/>
|
||||
<goods v-if="dialogVisible && dialogType === 'goods-list'" :goods="clickedInfo.goods" :order="clickedInfo"
|
||||
:selfProduct="clickedInfo.selfProduct"/>
|
||||
<set-express v-if="dialogVisible && dialogType === 'set-express'" :id="clickedInfo._id" :info="clickedInfo"
|
||||
@close="dialogVisible = false;query(1)"/>
|
||||
<set-refund v-if="dialogVisible && dialogType === 'set-refund'" :id="clickedInfo._id"
|
||||
@close="dialogVisible = false;query(1)"/>
|
||||
<express-info v-if="dialogVisible && dialogType === 'express-info'" :info="clickedInfo"
|
||||
@close="dialogVisible = false;"/>
|
||||
</el-dialog>
|
||||
<contact-modal ref="contactModal"/>
|
||||
<u-picker :show="showTypeFilter" :columns="[subsectionActive === 0 ? sellerTypeFilter : otherTypeFilter]" keyName="label"
|
||||
@cancel="showTypeFilter = false" @close="showTypeFilter = false" closeOnClickOverlay
|
||||
@confirm="confirmType">
|
||||
<template #more>
|
||||
<text @click="reset">重置</text>
|
||||
</template>
|
||||
</u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from "@/components/common/title.vue";
|
||||
import MakePay from "@/pages/shop/components/makePay.vue";
|
||||
import PayList from "@/pages/shop/components/payList.vue";
|
||||
import Goods from "./components/goods.vue";
|
||||
import SetExpress from "@/pages/shop/components/setExpress.vue";
|
||||
import SetRefund from "@/pages/shop/components/setRefund.vue";
|
||||
import ExpressInfo from "@/pages/shop/components/expressInfo.vue";
|
||||
import dayjs from "dayjs";
|
||||
import provinces from '@/util/address/provinces.json'
|
||||
import citys from '@/util/address/citys.json'
|
||||
import areas from '@/util/address/areas.json'
|
||||
import ContactModal from "@/components/ContactModal.vue";
|
||||
|
||||
const CREATE_PAY_LIST_CONFIRM_CONTENT = `1、您已充分知悉、了解并认可本订单及合同的全部内容以及各方的权利义务;
|
||||
2、请您按照订单或合同约定创建支付单，否则将存在被驳回的风险。若申请被驳回，请及时沟通处理，完成整改后再次提交。`
|
||||
|
||||
export default {
|
||||
components: {ContactModal, ExpressInfo, SetRefund, SetExpress, Goods, PayList, MakePay, uititle},
|
||||
data() {
|
||||
return {
|
||||
provincesData: provinces,
|
||||
isLoadMore: false, //默认关闭，请求列表数据超过一屏之后开启
|
||||
subsectionList: ['我卖出的', '我购买的', '线下交易'],
|
||||
subsectionActive: 0,
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
dialogTitle: '',
|
||||
clickedInfo: null,
|
||||
activeName: 'all',
|
||||
value: '',
|
||||
options: [{
|
||||
value: '自主交易',
|
||||
label: '自主交易'
|
||||
}],
|
||||
pageIndex: 1,
|
||||
menuIndex: '0',
|
||||
formData: {
|
||||
status: null,
|
||||
tradeMethod: null
|
||||
},
|
||||
tableData: {
|
||||
total: 0,
|
||||
rows: []
|
||||
},
|
||||
pageSize: 500,
|
||||
orderType: null,
|
||||
orderTypeList: [
|
||||
'商城订单',
|
||||
'金久信自营增值服务',
|
||||
'保证金',
|
||||
'会员升级',
|
||||
'询价订单',
|
||||
'加工订单',
|
||||
'旧货订单',
|
||||
'报价次数',
|
||||
'现货广告',
|
||||
'旧货加急',
|
||||
'旧货次数',
|
||||
'金久信学堂下载次数',
|
||||
'合同下载',
|
||||
'金久信签约宝次数',
|
||||
'金久信签约宝',
|
||||
'金久信自营询价',
|
||||
],
|
||||
orderStatusList: [
|
||||
'待支付',
|
||||
'待发货',
|
||||
'待收货',
|
||||
'待确认',
|
||||
'已完成',
|
||||
'退款审核中',
|
||||
'退款成功',
|
||||
'退款拒绝',
|
||||
'',
|
||||
'',
|
||||
'待报价',
|
||||
'已派单待完成',
|
||||
],
|
||||
payList: [],
|
||||
keyword: '',
|
||||
orderPayList: [],
|
||||
payInfo: {},
|
||||
payTypeList: ['预付款', '进度款', '尾款', '货到付款', '全款'],
|
||||
topExpiredAt: '',
|
||||
typeStr: '全部类型',
|
||||
showTypeFilter: false,
|
||||
sellerTypeFilter: [
|
||||
{
|
||||
label: '商城订单',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '询价订单',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '加工订单',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '旧货交易订单',
|
||||
value: 6
|
||||
},
|
||||
],
|
||||
otherTypeFilter: [
|
||||
{
|
||||
label: '商城订单',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '询价订单',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '加工订单',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '旧货交易订单',
|
||||
value: 6
|
||||
},
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dayjs,
|
||||
getGoodsImage(goods) {
|
||||
if (!goods) return ''
|
||||
if (goods.sku && goods.sku.image) return goods.sku.image
|
||||
if (goods.goods && goods.goods.cover) return goods.goods.cover
|
||||
return ''
|
||||
},
|
||||
sectionChange(index) {
|
||||
this.subsectionActive = index
|
||||
this.query()
|
||||
},
|
||||
handTab(index) {
|
||||
this.activeName = index
|
||||
this.query()
|
||||
},
|
||||
async query(pageIndex = 1, resetFilter = false, activeName = null) {
|
||||
if (resetFilter) {
|
||||
this.keyword = null
|
||||
this.orderType = null
|
||||
}
|
||||
if (activeName) this.activeName = activeName
|
||||
this.tableData = await vk.callFunction({
|
||||
url: 'client/order/kh/getList',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
pageIndex,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
isSeller: this.subsectionActive === 0 ? 1 : 0,
|
||||
type: this.orderType,
|
||||
signMethod: this.subsectionActive === 2 ? 1 : null,
|
||||
orderStatus: this.activeName === 'all ' ? null : parseInt(this.activeName),
|
||||
},
|
||||
});
|
||||
this.tableData.rows.map(item => {
|
||||
item.buyerStatusStr = ''
|
||||
if (item.type > 3 && item.payList) {
|
||||
item.buyerStatusStr = `${item.payList.type}-`
|
||||
if (item.payList.buyerRefuse) {
|
||||
item.buyerStatusStr += `买家已拒绝:${item.payList.refuseReason}。`
|
||||
if (item.isSeller) item.buyerStatusStr += '请等待卖家重新创建支付单'
|
||||
else item.buyerStatusStr += '请重新创建支付单'
|
||||
} else {
|
||||
if (item.payList.hasPaid) {
|
||||
if (item.payList.sellerConfirm) item.buyerStatusStr += '卖家已确认收款'
|
||||
else item.buyerStatusStr += '买家已支付,待卖家确认收款'
|
||||
} else item.buyerStatusStr += '买家未支付'
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.orderType = null
|
||||
this.typeStr = '全部类型'
|
||||
this.keyword = null
|
||||
this.showTypeFilter = false
|
||||
this.query(1)
|
||||
},
|
||||
contact(item) {
|
||||
try {
|
||||
const mobile = item.isBuyer ? item.seller.mobile : item.buyer.mobile
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: `交易方联系方式:${mobile}`,
|
||||
showCancel: false
|
||||
})
|
||||
} catch (e) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: `交易方未留下联系方式`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
},
|
||||
async makePayList(item) {
|
||||
const confirmed = await new Promise(resolve => {
|
||||
uni.showModal({
|
||||
title: '创建支付单', content: CREATE_PAY_LIST_CONFIRM_CONTENT,
|
||||
confirmText: '我已知晓', cancelText: '取消', showCancel: true,
|
||||
success: res => resolve(res.confirm), fail: () => resolve(false)
|
||||
})
|
||||
})
|
||||
if (!confirmed) return
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/order/kh/orderPayList',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id: item._id
|
||||
},
|
||||
});
|
||||
if (rows.length > 0 && !rows[rows.length - 1].buyerRefuse && !rows[rows.length - 1].sellerConfirm) {
|
||||
return this.$message.error('还有未确认的支付单,无法继续创建。请到支付单中查看并确认收款')
|
||||
}
|
||||
this.orderPayList = rows
|
||||
this.clickedInfo = item
|
||||
this.dialogType = 'create'
|
||||
this.dialogTitle = '创建支付单'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async showPayList(item) {
|
||||
this.clickedInfo = item
|
||||
await this.getPayList()
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '查看支付单'
|
||||
this.dialogType = 'pay-list'
|
||||
},
|
||||
async getPayList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/order/kh/orderPayList',
|
||||
title: '请求中...',
|
||||
data: {id: this.clickedInfo._id}
|
||||
})
|
||||
this.payList = rows
|
||||
},
|
||||
viewContract(contractId) {
|
||||
vk.callFunction({
|
||||
url: 'client/contract/kh/viewContract',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
contractId
|
||||
},
|
||||
success: (res) => {
|
||||
// window.open(res.data)
|
||||
window.location.href = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
async buyerRefuse(index) {
|
||||
this.payList[index].buyerRefuse = true
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/payRefuse',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id: this.payList[index]._id
|
||||
}
|
||||
})
|
||||
},
|
||||
showGoods(item) {
|
||||
this.clickedInfo = item;
|
||||
this.dialogTitle = '商品列表'
|
||||
this.dialogType = 'goods-list';
|
||||
this.dialogVisible = true
|
||||
},
|
||||
showRefund(item) {
|
||||
this.clickedInfo = item;
|
||||
this.dialogTitle = '退款申请'
|
||||
this.dialogType = 'set-refund';
|
||||
this.dialogVisible = true
|
||||
},
|
||||
setExpress(item) {
|
||||
this.clickedInfo = item;
|
||||
this.dialogTitle = '发货'
|
||||
this.dialogType = 'set-express';
|
||||
this.dialogVisible = true
|
||||
},
|
||||
showExpressInfo(item) {
|
||||
this.clickedInfo = item;
|
||||
this.dialogTitle = '发货详情'
|
||||
this.dialogType = 'express-info';
|
||||
this.dialogVisible = true
|
||||
},
|
||||
confirmExpress(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '只确认数量和金额，质保按双方合同约定内容执行',
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/changeOrderStatus',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id,
|
||||
orderStatus: 4
|
||||
}
|
||||
})
|
||||
this.activeName = '4'
|
||||
await this.query(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
payRefresh(menuIndex) {
|
||||
this.getPayList()
|
||||
this.query(1, null, menuIndex)
|
||||
},
|
||||
async cancel({_id}) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消订单吗?',
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/changeOrderStatus',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
id: _id,
|
||||
orderStatus: -1
|
||||
}
|
||||
})
|
||||
await this.query(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async showServicePhone() {
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/dict/pub/getDetail',
|
||||
data: {
|
||||
id: '657d8fca55b337cfadbe1063'
|
||||
}
|
||||
})
|
||||
uni.showModal({
|
||||
title: '平台客服',
|
||||
content: res.content,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
async showServiceQR() {
|
||||
const res = await vk.callFunction({
|
||||
url: 'client/dict/pub/getDetail',
|
||||
data: {
|
||||
id: '657d9025e0ec19b5040feb40'
|
||||
}
|
||||
})
|
||||
const h = this.$createElement;
|
||||
this.$confirm(`<image src="${res.content}" style="width: 100px;height: 100px;"/>`, '平台客服二维码', {
|
||||
cancelButtonText: '关闭',
|
||||
showConfirmButton: false,
|
||||
dangerouslyUseHTMLString: true
|
||||
})
|
||||
},
|
||||
async changeOrderStatus(id, orderStatus) {
|
||||
await vk.callFunction({
|
||||
url: 'client/order/kh/changeOrderStatus',
|
||||
data: {
|
||||
id,
|
||||
orderStatus
|
||||
}
|
||||
})
|
||||
await this.query(1)
|
||||
},
|
||||
showOtherUser(item) {
|
||||
const mine = item.isBuyer ? item.buyer : item.seller
|
||||
const otherUser = item.isBuyer ? item.seller : item.buyer
|
||||
const mineName = mine.accountType === 2 ? mine.company.companyName : mine.person.personName
|
||||
const otherName = otherUser.accountType === 2 ? otherUser.company.companyName : otherUser.person.personName
|
||||
this.$refs.contactModal.open(otherUser.businessCard.companyMobile, mine.businessCard.companyMobile, otherName, mineName)
|
||||
},
|
||||
confirmType({value}) {
|
||||
this.orderType = value[0].value
|
||||
this.typeStr = value[0].label
|
||||
this.query(1)
|
||||
this.showTypeFilter = false
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.menuIndex) this.subsectionActive = parseInt(option.menuIndex)
|
||||
if (option.keyword) this.keyword = option.keyword
|
||||
this.query()
|
||||
},
|
||||
/*上拉加载更多*/
|
||||
onReachBottom() {
|
||||
// uni.showToast({title: '加载更多……', icon: 'none'})
|
||||
// /*防止重复请求*/
|
||||
// if (!this.isLoadMore) {
|
||||
// this.isLoadMore = true
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-button--mini {
|
||||
padding: 0 1px !important;
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 30rpx;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
font-size: 26rpx;
|
||||
line-height: 88rpx;
|
||||
color: #2d2d2d;
|
||||
overflow-x: scroll;
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #A92924;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -3px;
|
||||
z-index: 9;
|
||||
margin-left: -34rpx;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 68rpx;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: #A92924;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 30rpx;
|
||||
padding: 16rpx 30rpx 10rpx;
|
||||
// border: 1px solid #e3e3e3;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 3px 3px #e3e3e3;
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
padding: 16rpx 0;
|
||||
|
||||
.img {
|
||||
width: 180rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #2a2a2a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
color: #A92924;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
color: #d7d7d7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.no {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.bage {
|
||||
font-size: 25rpx;
|
||||
color: #ff9600;
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
color: #2a2a2a;
|
||||
|
||||
.link {
|
||||
margin-left: 20rpx;
|
||||
// width: 156rpx;
|
||||
height: 48rpx;
|
||||
padding: 0 12rpx;
|
||||
text-align: center;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.link-1 {
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #A92924;
|
||||
background-color: #A92924;
|
||||
}
|
||||
|
||||
.link-2 {
|
||||
color: #999999;
|
||||
border: 1px solid #999999;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle title="支付"></uititle>
|
||||
</u-sticky>
|
||||
<view class="p-30">
|
||||
<view class="card">
|
||||
<view class="text-25 text-gray pb-20 border-bottom">订单号{{ info.orderNo }}</view>
|
||||
<template v-if="info.type === 0">
|
||||
<view class="p-20 rounded border m-30 pointer address" v-if="!address" @click="showAddress">
|
||||
点击选择地址
|
||||
</view>
|
||||
<view v-else
|
||||
class="py-20 flex justify-between items-center">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center">
|
||||
<text class="font-bold">{{ address.name }}</text>
|
||||
</view>
|
||||
<text>{{ address.phone }}</text>
|
||||
<text>{{ address.addressRegion.province.name }}{{
|
||||
address.addressRegion.city.name
|
||||
}}{{ address.addressRegion.area.name }}{{ address.addressDetail }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center">
|
||||
<u-button type="primary" @click="showAddress" size="mini">
|
||||
变更
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="py-20 font-bold">商品详情</view>
|
||||
<view class="flex justify-start items-start my-20 text-25" v-for="(item, index) in info.goods"
|
||||
:key="index">
|
||||
<text v-if="info.type === 0">
|
||||
<u-image :src="item.goodsCover" mode="aspectFit" width="150rpx" height="150rpx" radius="15"/>
|
||||
</text>
|
||||
<template v-if="info.type === 0">
|
||||
<view class="flex flex-col justify-start items-start ">
|
||||
<text class=" font-bold text-30">{{ item.goodsName }}</text>
|
||||
<text class="mt-15 text-gray">{{ item.sku.label }}</text>
|
||||
<text class="mt-15 text-main">￥{{ item.sku.values }}</text>
|
||||
</view>
|
||||
<text class="w-15p">x{{ item.num }}</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 ">
|
||||
<text class=" font-bold text-30">{{ 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 class="mt-40 font-bold text-main">您的会员等级:
|
||||
{{ getUserLevelLabel(userInfo.userLevel) }}
|
||||
{{ info.offRate !== 100 ? `,享受${info.offRate / 10}折优惠,已为您优惠${info.saveAmount}元` : '' }}
|
||||
</view>
|
||||
<view class="mt-40 flex flex-col justify-center items-center m-a">
|
||||
<text class=" mb-20"
|
||||
:class="[info.amount !== info.offAmount ? 'text-line-through text-25' : 'text-main font-bold text-30']"
|
||||
v-if="info">
|
||||
订单金额:￥{{ info.amount }}
|
||||
</text>
|
||||
<text class="text-main font-bold text-40 mb-20" v-if="info && info.offAmount && info.amount !== info.offAmount">
|
||||
优惠后金额:￥{{ info.offAmount ? parseFloat(info.offAmount).toFixed(2) : '' }}
|
||||
</text>
|
||||
<view class="border rounded flex justify-start items-center p-10 w-100p "
|
||||
@click="payType = 'alipay'"
|
||||
:class="[payType === 'alipay' ? 'border-main bg-main-light text-main' : '']">
|
||||
<u-icon name="/static/img/alipay.png" size="40rpx"/>
|
||||
<text class="text-25 ml-25">支付宝</text>
|
||||
</view>
|
||||
<view class="border rounded flex justify-start items-center p-10 w-100p my-25"
|
||||
@click="payType = 'wechat'"
|
||||
:class="[payType === 'wechat' ? 'border-main bg-main-light text-main' : '']">
|
||||
<u-icon name="/static/img/wechat-pay.png" size="40rpx"/>
|
||||
<text class="text-25 ml-25">微信支付</text>
|
||||
</view>
|
||||
<u-button type="primary" shape="circle"
|
||||
:disabled="(info.type === 0 && !address)" @click="onPay">
|
||||
立即支付
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="95%" :close-on-click-modal="false"
|
||||
@close="dialogVisible = false">
|
||||
<template v-if="dialogVisible && dialogType === 'address-list'">
|
||||
<view v-for="(item, index) in addressList" :key="index"
|
||||
class="py-20 border-bottom flex justify-between items-center">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center">
|
||||
<text v-if="item.isDefault" class="default-address">默</text>
|
||||
<text class="font-bold">{{ item.name }}</text>
|
||||
</view>
|
||||
<text>{{ item.phone }}</text>
|
||||
<text>{{ item.addressRegion.province.name }}{{
|
||||
item.addressRegion.city.name
|
||||
}}{{ item.addressRegion.area.name }}{{ item.addressDetail }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex justify-center items-center flex-col">
|
||||
<u-button type="primary" @click="address = item; dialogVisible = false" size="small">
|
||||
选择
|
||||
</u-button>
|
||||
<u-button type="warning" @click="addressEdit(item)" plain size="small" class="mt-20">
|
||||
编辑
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-center mt-50">
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" type="primary"
|
||||
@click="dialogType = 'address-action'; dialogTitle = '新增地址'">
|
||||
新增地址
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" plain @click="dialogVisible = false">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="flex flex-col justify-start" v-else-if="dialogVisible && dialogType === 'address-action'">
|
||||
<el-form ref="form" label-width="100px">
|
||||
<el-form-item label="收件人姓名">
|
||||
<el-input v-model="name" placeholder="请输入收件人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人手机号">
|
||||
<el-input v-model="phone" placeholder="请输入收件人手机号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收件人地址" @click.native="doShowAddress">
|
||||
<u-input v-model="addressRegionStr" disabled suffix-icon="arrow-right"
|
||||
style="pointer-events:none"/>
|
||||
</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>
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" type="primary" @click="onAddressAction">保存</u-button>
|
||||
</view>
|
||||
<view class="flex-1 px-30">
|
||||
<u-button size="small" @click="dialogTitle = '地址列表'; dialogType = 'address-list'">取消
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
||||
</el-dialog>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from "@/components/common/title.vue";
|
||||
import {getUserLevelLabel} from "@/util";
|
||||
import AddressSelect from "@/components/AddressSelect.vue";
|
||||
import dayjs from 'dayjs'
|
||||
import {Loading} from "element-ui";
|
||||
|
||||
const OpenSdk = require('@/util/base').default;
|
||||
|
||||
const appId = '8a81c1db8fc5238d01910b9e312d0692'
|
||||
const appKey = 'a15ceac60f5b464eb758c4fe7800ee9f'
|
||||
const sdk = new OpenSdk({
|
||||
appId,
|
||||
appKey
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "pay",
|
||||
components: {AddressSelect, uititle},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
type: null,
|
||||
offRate: 100
|
||||
},
|
||||
addressIndex: [null, null, null],
|
||||
addressDetail: '',
|
||||
addressRegion: null,
|
||||
addressRegionStr: null,
|
||||
name: '',
|
||||
phone: '',
|
||||
billQRCode: null,
|
||||
checkPayInterval: null,
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
dialogType: '',
|
||||
address: null,
|
||||
addressList: [],
|
||||
selectedAddressId: null,
|
||||
isDefault: false,
|
||||
userInfo: null,
|
||||
payType: 'alipay'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserLevelLabel,
|
||||
doShowAddress() {
|
||||
this.$refs.AddressSelect.open(this.addressRegion);
|
||||
},
|
||||
regionConfirm({province, city, area}) {
|
||||
this.addressRegion = {province, city, area}
|
||||
this.addressRegionStr = `${province.name}${city.name}${area.name}`
|
||||
},
|
||||
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: this.info.addressRegion,
|
||||
}
|
||||
}
|
||||
if (this.info.orderStatus === -1) {
|
||||
this.$message.error('订单已取消')
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
vk.redirectTo({
|
||||
url: '/pages/shop/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, 10].includes(this.info.type)) {
|
||||
vk.navigateBack()
|
||||
} else if (this.info.type === 13) {
|
||||
vk.redirectTo({
|
||||
url: '/pages/public/sign?tab=signBuyLog',
|
||||
})
|
||||
} else {
|
||||
vk.redirectTo({
|
||||
url: '/pages/shop/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,
|
||||
}
|
||||
})
|
||||
}
|
||||
// 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.amount * 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.amount * 100 - subOrderAmount
|
||||
const queryUrl = this.payType === 'alipay' ? 'https://api-mop.chinaums.com/v1/netpay/trade/h5-pay' : ' https://api-mop.chinaums.com/v1/netpay/wxpay/h5-to-minipay'
|
||||
let returnUrl = 'https://m.jinjiuxinzg.cn/pages/shop/order'
|
||||
if (this.info.type === 13) {
|
||||
returnUrl = 'https://m.jinjiuxinzg.cn/pages/public/sign'
|
||||
} else {
|
||||
returnUrl = 'https://m.jinjiuxinzg.cn/pages/shop/order?menuIndex=1'
|
||||
}
|
||||
let attachedData = this.info.goods[0].goodsName
|
||||
if (this.info.goods.length > 1) attachedData += `等${this.info.goods.length - 1}件商品`
|
||||
let data = {
|
||||
queryUrl,
|
||||
'timestamp': timestamp,
|
||||
'nonce': 'rp84ufhfn20yneo3tp',
|
||||
'content': {
|
||||
'merOrderId': this.info.orderNo,
|
||||
'requestTimestamp': requestTimestamp,
|
||||
'mid': '898450100001680',
|
||||
'tid': 'FS7JH7XH',
|
||||
'instMid': 'H5DEFAULT',
|
||||
'totalAmount': parseFloat(this.info.offAmount * 100).toFixed(0),
|
||||
// notifyUrl: 'https://fc-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/pay_notify',
|
||||
'notifyUrl': 'https://tcb-n44byxi8bmrfrki-d4bn1c4a206d.service.tcloudbase.com/pay_notify',
|
||||
returnUrl,
|
||||
'feeRatio': 'aaa',
|
||||
'goods': goodsList,
|
||||
'merAppId': 'wxebcff8cf982b9e65',
|
||||
attachedData,
|
||||
billDesc: attachedData,
|
||||
},
|
||||
'authorization': 0,
|
||||
}
|
||||
|
||||
|
||||
const content = JSON.stringify(data.content);
|
||||
const signature = sdk.generateSignature(data)
|
||||
const Url = `${data.queryUrl}?authorization=OPEN-FORM-PARAM&appId=${appId}×tamp=${data.timestamp}&nonce=${data.nonce}&content=${encodeURIComponent(content)}&signature=${signature}`
|
||||
window.location.href = Url
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
// const loadingInstance = Loading.service({fullscreen: true, text: '请求中'});
|
||||
// uni.showLoading({title: '请求中'})
|
||||
// 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)
|
||||
// // }
|
||||
// console.log(res)
|
||||
// }).catch(err => {
|
||||
// this.$nextTick(() => {
|
||||
// // loadingInstance.close();
|
||||
// uni.hideLoading()
|
||||
// });
|
||||
// this.$message({
|
||||
// type: 'error',
|
||||
// message: '服务器繁忙，请稍后再试或联系平台客服'
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// vk.redirectTo({
|
||||
// url: '/pages/shop/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.addressRegion.province === null) return this.$message({
|
||||
type: 'error',
|
||||
message: '请填写地址'
|
||||
})
|
||||
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.addressRegion = null
|
||||
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.addressRegion = item.addressRegion
|
||||
this.addressRegionStr = `${item.addressRegion.province.name} ${item.addressRegion.city.name} ${item.addressRegion.area.name}`
|
||||
this.dialogType = 'address-action';
|
||||
this.dialogTitle = ' 编辑地址'
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id
|
||||
},
|
||||
onShow() {
|
||||
this.getInfo(true)
|
||||
this.getUserAddress()
|
||||
this.userInfo = vk.getStorageSync('uni_id_user_info')
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
},
|
||||
onUnload() {
|
||||
if (this.checkPayInterval) clearInterval(this.checkPayInterval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template> <!-- 商城 -->
|
||||
<view class="wrap">
|
||||
<!-- 吸顶 -->
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<!-- 顶部 -->
|
||||
<uiheader title="金久信特产商城"></uiheader>
|
||||
<!-- 搜索栏 -->
|
||||
<cmsearch :k="keyword" @search="search" placeholder="请输入商品名称等搜索"></cmsearch>
|
||||
<!-- 轮播图-传值:list="数组" -->
|
||||
<cmswiper page="shop" height="320rpx"></cmswiper>
|
||||
<view class="layout-sch bg-white flex justify-between align-center" @click="showAddress">
|
||||
<view class="select down flex-1">{{ locationValue ? locationValue : '选择地区' }}</view>
|
||||
<!-- <view class="flex-1"></view>-->
|
||||
<view class="logo">
|
||||
<image class="full" src="/static/img/shoplogo.png" mode=""></image>
|
||||
</view>
|
||||
<!-- <view class="name m-left-10">金久信特产商城</view>-->
|
||||
</view>
|
||||
<!-- 滑动区 -->
|
||||
<view class="flex justify-start items-center bg-white">
|
||||
<scroll-view class="scroll-box flex-1" @scroll="onCateScroll" scroll-x="true">
|
||||
<view class="item" :class="{ active: categoryId === null }" @click="selectCate(null)">
|
||||
<view class="text break">全部</view>
|
||||
</view>
|
||||
<view class="item" :class="{ active: categoryId === item._id }" v-for="(item,index) in categoryList"
|
||||
:key="index" @click="selectCate(item._id)">
|
||||
<view class="text break">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view >
|
||||
<u-icon name="arrow-right-double" :color="hasMore ? '#A92924' : '#AAAAAA'"/>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<!-- 列表 -->
|
||||
<uiswiper :ad="27" padding="10rpx 20rpx"></uiswiper>
|
||||
<uiswiper :ad="28" padding="10rpx 20rpx"></uiswiper>
|
||||
<uiswiper :ad="29" padding="10rpx 20rpx"></uiswiper>
|
||||
<uiswiper :ad="30" padding="10rpx 20rpx"></uiswiper>
|
||||
<uiswiper :ad="31" padding="10rpx 20rpx"></uiswiper>
|
||||
<view class="layout layout-shop flex justify-between flex-wrap">
|
||||
<view class="item pos-r" @click="detailLink(item._id)" v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="img">
|
||||
<image class="full" :src="item.cover" mode="aspectFill"/>
|
||||
</view>
|
||||
<text class="recommend" v-if="item.recommend === 1">荐</text>
|
||||
<view class="info">
|
||||
<view class="title text-both">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="price m-top-10">
|
||||
<text class="current">¥<text class="blod">{{ item.amount }}</text>
|
||||
到手价
|
||||
</text>
|
||||
<!-- <text class="cost m-left-10">¥35.5</text>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有数据 u-empty是框架组件 cmempty是自己封装组件 -->
|
||||
<u-empty mode="list" text="暂无更多内容~" v-if="goodsList.length === 0"></u-empty>
|
||||
<!-- <cmempty></cmempty> -->
|
||||
<collapse></collapse>
|
||||
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
||||
<view class="issue" @click="$jump('/pages/shop/cart')">
|
||||
<u-icon name="shopping-cart" color="#fff" size="24"></u-icon>
|
||||
<text class="cartNum" v-if="cartNum > 0">{{ cartNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiheader from '@/components/index/header'
|
||||
import cmsearch from '@/components/common/search'
|
||||
import cmempty from '@/components/common/empty'
|
||||
import cmswiper from '@/components/common/swiper'
|
||||
import Collapse from "@/components/index/collapse.vue";
|
||||
import AddressSelect from "@/components/AddressSelect.vue";
|
||||
import uiswiper from "@/components/index/swiper.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uiswiper,
|
||||
AddressSelect,
|
||||
Collapse,
|
||||
uiheader,
|
||||
cmsearch,
|
||||
cmempty,
|
||||
cmswiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categoryList: [],
|
||||
goodsList: [],
|
||||
options: [],
|
||||
address: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
categoryId: null,
|
||||
keyword: null,
|
||||
locationValue: null,
|
||||
region: {
|
||||
province: {
|
||||
code: null,
|
||||
name: null,
|
||||
},
|
||||
city: {
|
||||
code: null,
|
||||
name: null,
|
||||
},
|
||||
},
|
||||
cartNum: 0,
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAddress() {
|
||||
this.$refs.AddressSelect.open(this.region, 2, true);
|
||||
},
|
||||
regionConfirm({province, city}) {
|
||||
this.region = {province, city}
|
||||
this.locationValue = `${province.name}${city.name}`
|
||||
this.getGoodsList()
|
||||
},
|
||||
handTab(val, index) {
|
||||
this.custIndex = index
|
||||
},
|
||||
detailLink(id) {
|
||||
vk.navigateTo(`/pages/shop/detail?id=${id}`, {
|
||||
id,
|
||||
})
|
||||
},
|
||||
getCategoryList() {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/category/pub/getList'
|
||||
}).then(res => {
|
||||
this.categoryList = res.rows
|
||||
})
|
||||
},
|
||||
search(keyword) {
|
||||
this.keyword = keyword
|
||||
this.getGoodsList()
|
||||
},
|
||||
getGoodsList(pageIndex = 1) {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/list/pub/getList',
|
||||
data: {
|
||||
pageIndex,
|
||||
pageSize: this.pageSize,
|
||||
city: this.region.city ? this.region.city.code : null,
|
||||
parentId: this.categoryId,
|
||||
keyword: this.keyword
|
||||
}
|
||||
}).then(res => {
|
||||
this.goodsList = res.rows
|
||||
})
|
||||
},
|
||||
getCartNum() {
|
||||
vk.callFunction({
|
||||
url: 'client/cart/kh/getNum',
|
||||
}).then(({data}) => {
|
||||
this.cartNum = data
|
||||
})
|
||||
},
|
||||
selectCate(cateId) {
|
||||
if (this.categoryId === cateId) this.categoryId = null
|
||||
else this.categoryId = cateId
|
||||
this.getGoodsList()
|
||||
},
|
||||
onCateScroll({detail: {scrollLeft, scrollWidth}}) {
|
||||
const wrapWidth = uni.upx2px(690)
|
||||
const maxScrollLeft = scrollWidth - wrapWidth
|
||||
console.log(maxScrollLeft, scrollLeft)
|
||||
this.hasMore = scrollLeft + 50 < maxScrollLeft
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.keyword) this.keyword = option.keyword
|
||||
this.getCategoryList()
|
||||
this.getGoodsList()
|
||||
this.getCartNum()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-sch {
|
||||
padding: 30rpx 30rpx;
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
width: 260rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333;
|
||||
padding: 10rpx 30rpx 10rpx 20rpx;
|
||||
border: 1px solid #f2f2f2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.down::after {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
z-index: 9;
|
||||
content: '';
|
||||
margin-top: -6rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 12rpx solid #999999;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
// width: 690rpx;
|
||||
width: 690rpx;
|
||||
//height: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
background: #ffffff;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
color: #454545;
|
||||
border-radius: 6rpx;
|
||||
background: #f2f2f2;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #ffffff;
|
||||
background: #A92924;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-shop {
|
||||
margin: 20rpx 30rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 30rpx;
|
||||
width: 330rpx;
|
||||
height: auto;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 10rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.bs {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #ffffff;
|
||||
padding: 0 8rpx;
|
||||
background: #A92924;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
width: 100%;
|
||||
//height: 32rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.current {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
color: #A92924;
|
||||
|
||||
.blod {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.recommend {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 5px;
|
||||
background-color: #bf2b28;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cartNum {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
padding: 5px;
|
||||
background-color: #FFFFFF;
|
||||
color: #bf2b28;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 25rpx;
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
border: 1px solid #bf2b28;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user