You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
13 KiB
454 lines
13 KiB
<template>
|
|
<view class="goods-info">
|
|
<view class="title">商品信息</view>
|
|
<view class="goods-content">
|
|
<view v-for="(goods, i) in goodsList" :key="i">
|
|
<view class="flex-row group_9">
|
|
<image :src="goods.productImgUrl" class="image_7" />
|
|
<view class="flex-col items-start group_10">
|
|
<view class="flex-col group_11">
|
|
<text class="text_12">{{ goods.productName }}</text>
|
|
<text class="text_13">¥{{ goods.listUnitPrice }}/{{ goods.skuDesc }}/{{ goods.quantity }}个</text>
|
|
</view>
|
|
<text class="text_14">¥{{ goods.totalAmount }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="remark" v-if="goods.remark">
|
|
<text class="remark-label">商品备注：</text>
|
|
<text class="remark-content">{{ goods.remark || '' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="postage">
|
|
<text class="label">温馨提示</text>
|
|
<view class="flex-col-end-start">
|
|
<!-- <text class="label">{{ hasArea ? '下单后三天内发货' : '定制商品需要三到五天的制作工期' }}</text> -->
|
|
<text class="label">定制商品需要三到五天的制作工期</text>
|
|
<text class="tip">详情可资讯客服</text>
|
|
</view>
|
|
</view>
|
|
<view class="form">
|
|
<!-- 半天妖的区域选择 -->
|
|
<!-- <view v-if="hasArea" class="form-item">
|
|
<text class="label">下单区域</text>
|
|
<view class="box" @click="showArea">
|
|
<text v-show="areaName">{{ areaName }} {{ areaProvince }} {{ areaCity }}</text>
|
|
<image src="/static/imgs/general/right-arrow.png" style="width: 32rpx; height: 32rpx" v-show="!areaInfo"></image>
|
|
</view>
|
|
</view> -->
|
|
<view class="form-item">
|
|
<text class="label">订单备注</text>
|
|
<input class="value" v-model="form.remark" placeholder="填写备注" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <uni-popup ref="areaPopup" type="bottom" background-color="#fff">
|
|
<view class="popup-content">
|
|
<view v-show="areaName">
|
|
<view class="title-content">
|
|
<text>{{ areaName }}</text>
|
|
<text style="margin-left: 32rpx">{{ areaProvince }}</text>
|
|
<text style="margin-left: 32rpx">{{ areaCity }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-show="!areaName">
|
|
<view class="title-content">
|
|
<text>请选择区域</text>
|
|
</view>
|
|
</view>
|
|
<view class="scroll-title">
|
|
<view class="left">经理</view>
|
|
<view class="center">省</view>
|
|
<view class="right">市</view>
|
|
</view>
|
|
<view class="scroll-content">
|
|
<view class="left">
|
|
<view v-for="item in areaList" :key="item.id" class="item" @click="selectName(item.name)">
|
|
<text :class="{ selected: item.name === areaName }">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view v-for="item in curProvinceList" :key="item.provinceCode" class="item" @click="selectProvince(item.provinceName)">
|
|
<text :class="{ selected: item.provinceName === areaProvince }">{{ item.provinceName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="item" v-for="city in curCityList" :key="city.cityCode" @click="selectCity(city.cityName)">
|
|
<text :class="{ selected: city.cityName === areaCity }">{{ city.cityName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getBTAreaList } from '@/apis/commonApi.js'
|
|
export default {
|
|
props: {
|
|
goodsList: {
|
|
type: Array,
|
|
default: () => [
|
|
// {
|
|
// productImgUrl: 'https://qncloudtest.oss-cn-shenzhen.aliyuncs.com/common/14189212646949759.png',
|
|
// productName: '网红便当蛋糕提拉米苏包装盒子',
|
|
// listUnitPrice: 0.01,
|
|
// skuDesc: '毕业季/水金款',
|
|
// quantity: 100,
|
|
// totalAmount: 1,
|
|
// remark: '备注'
|
|
// },
|
|
// {
|
|
// productImgUrl: 'https://qncloudtest.oss-cn-shenzhen.aliyuncs.com/common/14189212646949759.png',
|
|
// productName: '网红便当蛋糕提拉米苏包装盒子',
|
|
// listUnitPrice: 0.01,
|
|
// skuDesc: '毕业季/水金款',
|
|
// quantity: 100,
|
|
// totalAmount: 1,
|
|
// remark: '备注'
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
remark: ''
|
|
}
|
|
// areaList: [],
|
|
// curProvinceList: [],
|
|
// curCityList: [],
|
|
// areaName: '',
|
|
// areaProvince: '',
|
|
// areaCity: ''
|
|
}
|
|
},
|
|
// computed: {
|
|
// hasArea() {
|
|
// let target = this.goodsList.find((item) => item.type === 'bty')
|
|
// return !!target
|
|
// }
|
|
// },
|
|
// mounted() {
|
|
// this.getAreaList()
|
|
// },
|
|
// watch: {
|
|
// hasArea(val) {
|
|
// if (val) {
|
|
// this.getAreaList()
|
|
// }
|
|
// },
|
|
// // 区域经理
|
|
// areaName(val) {
|
|
// this.areaCity = ''
|
|
// this.areaProvince = ''
|
|
// if (!val) {
|
|
// this.curProvinceList = []
|
|
// this.curCityList = []
|
|
// return
|
|
// }
|
|
// let target = this.areaList.find((item) => item.name === val)
|
|
// if (!target) {
|
|
// this.curProvinceList = []
|
|
// this.curCityList = []
|
|
// return
|
|
// }
|
|
// this.curProvinceList = target.provinces || []
|
|
// },
|
|
// areaProvince(val) {
|
|
// this.areaCity = ''
|
|
// if (!val) {
|
|
// this.curCityList = []
|
|
// return
|
|
// }
|
|
// let target = this.curProvinceList.find((item) => item.provinceName === val)
|
|
// if (!target) {
|
|
// this.curCityList = []
|
|
// return
|
|
// }
|
|
// this.curCityList = target.cities || []
|
|
// },
|
|
// areaCity(val) {
|
|
// if (!val) {
|
|
// return
|
|
// }
|
|
// this.$refs.areaPopup.close()
|
|
// }
|
|
// },
|
|
methods: {
|
|
// getAreaList() {
|
|
// getBTAreaList().then((res) => {
|
|
// this.areaList = res
|
|
// })
|
|
// },
|
|
// getBtyRemark() {
|
|
// let target = this.goodsList[0]
|
|
// let index = target.productName.lastIndexOf('半天妖')
|
|
// return target.productName.substring(index + 3) + '版本名称'
|
|
// },
|
|
// selectName(name) {
|
|
// if (this.areaName === name) {
|
|
// this.areaName = ''
|
|
// } else {
|
|
// this.areaName = name
|
|
// }
|
|
// },
|
|
// selectProvince(name) {
|
|
// if (this.areaProvince === name) {
|
|
// this.areaProvince = ''
|
|
// } else {
|
|
// this.areaProvince = name
|
|
// }
|
|
// },
|
|
// selectCity(name) {
|
|
// if (this.areaCity === name) {
|
|
// this.areaCity = ''
|
|
// return
|
|
// }
|
|
// this.areaCity = name
|
|
// },
|
|
// checkForm() {
|
|
// if (this.hasArea) {
|
|
// if (!this.areaCity) {
|
|
// uni.showToast({
|
|
// title: '请选择下单区域',
|
|
// icon: 'none'
|
|
// })
|
|
// return false
|
|
// }
|
|
// if (!this.form.remark) {
|
|
// uni.showToast({
|
|
// title: '请输入' + this.getBtyRemark(),
|
|
// icon: 'none'
|
|
// })
|
|
// return false
|
|
// }
|
|
// }
|
|
// return true
|
|
// },
|
|
getForm() {
|
|
// if (!this.checkForm()) {
|
|
// return {
|
|
// status: 'fail',
|
|
// value: null
|
|
// }
|
|
// }
|
|
// let form = { ...this.form }
|
|
// if (this.hasArea) {
|
|
// let extraRemark = `经理:${this.areaName}; ${this.areaProvince}省; ${this.areaCity}市; 订单备注:`
|
|
// form.remark = extraRemark + form.remark
|
|
// }
|
|
return {
|
|
status: 'success',
|
|
value: this.form
|
|
}
|
|
}
|
|
// showArea() {
|
|
// this.$refs.areaPopup.open('bottom')
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.goods-info {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
.title {
|
|
padding: 24rpx;
|
|
font-size: 30rpx;
|
|
color: rgb(0, 0, 0);
|
|
text-align: left;
|
|
border-bottom: 1px solid rgb(221, 221, 221);
|
|
}
|
|
.goods-content {
|
|
padding: 32rpx 24rpx 24rpx;
|
|
.group_9 {
|
|
margin-top: 20rpx;
|
|
padding: 0rpx 24rpx;
|
|
.image_7 {
|
|
border-radius: 16rpx;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
.group_10 {
|
|
margin-left: 12rpx;
|
|
flex: 1 1 auto;
|
|
.group_11 {
|
|
width: 420rpx;
|
|
.text_12 {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-family: 'PingFangSC-Medium';
|
|
font-weight: 500;
|
|
line-height: 45rpx;
|
|
text-align: left;
|
|
}
|
|
.text_13 {
|
|
margin-top: 10rpx;
|
|
align-self: flex-start;
|
|
color: #888888;
|
|
font-size: 22rpx;
|
|
font-family: 'PingFangSC-Medium';
|
|
font-weight: 500;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
.text_14 {
|
|
margin-top: 13rpx;
|
|
color: #ff0000;
|
|
font-size: 26rpx;
|
|
font-family: 'PingFangSC-Medium';
|
|
font-weight: 500;
|
|
line-height: 37rpx;
|
|
}
|
|
}
|
|
}
|
|
.remark {
|
|
display: flex;
|
|
margin-top: 16rpx;
|
|
line-height: 40rpx;
|
|
padding-left: 24rpx;
|
|
.remark-label {
|
|
display: inline-block;
|
|
color: #888888;
|
|
font-size: 24rpx;
|
|
}
|
|
.remark-content {
|
|
display: inline-block;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
width: 520rpx;
|
|
}
|
|
}
|
|
.image {
|
|
margin-left: 28rpx;
|
|
width: 60rpx;
|
|
height: 68rpx;
|
|
}
|
|
.postage {
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
.tip {
|
|
font-size: 22rpx;
|
|
color: rgb(136, 136, 136);
|
|
margin-top: 16rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
.form {
|
|
margin-top: 32rpx;
|
|
.form-item {
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: rgb(51, 51, 51);
|
|
}
|
|
.box {
|
|
font-size: 28rpx;
|
|
color: rgb(153, 153, 153);
|
|
text-align: right;
|
|
width: 500rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: rgb(153, 153, 153);
|
|
text-align: right;
|
|
width: 500rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: rgb(51, 51, 51);
|
|
}
|
|
.red {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
.popup-content {
|
|
width: 750rpx;
|
|
height: 800rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
.title-content {
|
|
width: 100%;
|
|
padding: 0 32rpx;
|
|
height: 92rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: rgb(51, 51, 51);
|
|
}
|
|
.scroll-title {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: rgb(51, 51, 51);
|
|
.left {
|
|
width: 250rpx;
|
|
text-align: center;
|
|
}
|
|
.center {
|
|
width: 250rpx;
|
|
text-align: center;
|
|
}
|
|
.right {
|
|
width: 250rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.scroll-content {
|
|
width: 750rpx;
|
|
height: 508rpx;
|
|
padding-bottom: 32rpx;
|
|
border-top: 1px solid rgba(221, 221, 221, 0.5);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.left {
|
|
width: 250rpx;
|
|
height: 508rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.center {
|
|
width: 250rpx;
|
|
height: 508rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.right {
|
|
width: 250rpx;
|
|
height: 508rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
line-height: 70rpx;
|
|
color: rgb(51, 51, 51);
|
|
height: 70rpx;
|
|
text-align: center;
|
|
}
|
|
.selected {
|
|
color: #007aff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|