|
@@ -6,78 +6,154 @@
|
|
|
<!-- 所属店铺 -->
|
|
|
<view class="shop detail-list">
|
|
|
<view class="menu">
|
|
|
- <view class="title">所属店铺</view>
|
|
|
- <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker
|
|
|
+ class="selectlist"
|
|
|
+ mode="selector"
|
|
|
+ @change="changeStore"
|
|
|
+ :value="0"
|
|
|
+ :range="storeList"
|
|
|
+ range-key="name"
|
|
|
+ >
|
|
|
+ <view class="uni-input title">{{
|
|
|
+ storeList[storeIndex].name
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/images/moreicon.png"
|
|
|
+ class="more"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 商品类型 -->
|
|
|
<view class="shoptype detail-list noborder">
|
|
|
<view class="menu">
|
|
|
- <view class="title">商品类型</view>
|
|
|
- <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker
|
|
|
+ @change="changeType"
|
|
|
+ :value="typeIndex"
|
|
|
+ :range="typeList"
|
|
|
+ range-key="name"
|
|
|
+ class="selectlist"
|
|
|
+ >
|
|
|
+ <view class="uni-input title">{{
|
|
|
+ typeList[typeIndex].name
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/images/moreicon.png"
|
|
|
+ class="more"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 商品名称 -->
|
|
|
<view class="shopname detail-list">
|
|
|
<view class="menu">
|
|
|
- <view class="title">商品名称</view>
|
|
|
- <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker
|
|
|
+ @change="changeShop"
|
|
|
+ :value="shopIndex"
|
|
|
+ :range="shopList"
|
|
|
+ range-key="name"
|
|
|
+ class="selectlist"
|
|
|
+ >
|
|
|
+ <view class="uni-input title">{{
|
|
|
+ shopList[shopIndex].name
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/images/moreicon.png"
|
|
|
+ class="more"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 自定义分类 -->
|
|
|
<view class="classify detail-list noborder">
|
|
|
<view class="menu">
|
|
|
<view class="title bigtitle">自定义分类</view>
|
|
|
- <view class="txt">管理分类</view>
|
|
|
+ <view class="txt" @tap="toClassify">管理分类</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 西线推荐 -->
|
|
|
<view class="xiline detail-list noborder">
|
|
|
<view class="menu">
|
|
|
- <view class="title linetitle">西线推荐</view>
|
|
|
- <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker
|
|
|
+ @change="changeClassify"
|
|
|
+ :value="lineIndex"
|
|
|
+ :range="lineList"
|
|
|
+ range-key="name"
|
|
|
+ class="selectlist"
|
|
|
+ >
|
|
|
+ <view class="uni-input title">{{
|
|
|
+ lineList[lineIndex].name
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/images/moreicon.png"
|
|
|
+ class="more"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 账号限制 -->
|
|
|
<view class="idastrict detail-list noborder">
|
|
|
<view class="menu">
|
|
|
<view class="title astricttitle">账号限制</view>
|
|
|
- <switch @change="Change" />
|
|
|
+ <switch :checked="showoperat" @change="Change" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 账号限制 -->
|
|
|
<view class="detail-list noborder operat" v-if="showoperat">
|
|
|
<view class="menu">
|
|
|
- <view class="title">同一账号</view>
|
|
|
- <view class="sub">-</view><text class="num1">{{ num1 }}</text
|
|
|
- ><view class="add">+</view>
|
|
|
+ <view class="title">同一账号在</view>
|
|
|
+ <view class="sub" @tap="subtractUser">-</view>
|
|
|
+ <text class="num1">{{ num1 }}</text>
|
|
|
+ <view class="add" @tap="addUser">+</view>
|
|
|
<view class="txt">天内最多购买</view>
|
|
|
- <view class="sub">-</view><text class="num2">{{ num2 }}</text
|
|
|
- ><view class="add">+</view><text class="unit">张</text>
|
|
|
+ <view class="sub" @tap="subtractDate">-</view
|
|
|
+ ><text class="num2">{{ num2 }}</text
|
|
|
+ ><view class="add" @tap="addDate">+</view><text class="unit">张</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 商品图标 -->
|
|
|
- <view class="shopicon">商品图标</view>
|
|
|
- <view class="iconcontent"><text class="icon"></text></view>
|
|
|
- <view class="shopicon">商品图册</view>
|
|
|
- <view class="uploading">
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 购票须知 -->
|
|
|
- <view class="shopicon">商品描述(购票须知)</view>
|
|
|
- <view class="know">
|
|
|
- <view class="txt-list">服务信息</view>
|
|
|
- <view class="txt-list">本商品支付完成即可顺利出行,无需等待确认</view>
|
|
|
- <view class="txt-list">本商品无需出团通知书/确认单,预定成功后即可出行</view>
|
|
|
- <view class="txt-list">取消政策</view>
|
|
|
- <view class="txt-list">按规则退</view>
|
|
|
- <view class="txt-list">旅游者违约退改规则</view>
|
|
|
- <view class="txt-list">购买须知</view>
|
|
|
- <view class="txt-list">商品过了使用期限后将不可再使用,请您一定要在使用时间</view>
|
|
|
- <view class="txt-list">范围内及时使用哦</view>
|
|
|
- </view>
|
|
|
+ <!-- 商品图标 -->
|
|
|
+ <view class="shopicon">商品图标</view>
|
|
|
+ <view class="iconcontent">
|
|
|
+ <text class="icon" @tap="uploadImg"></text>
|
|
|
+ <image class="shopLogo" :src="img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="shopicon">商品图册</view>
|
|
|
+ <view class="uploading"> </view>
|
|
|
+ <!-- 购票须知 -->
|
|
|
+ <view class="shopicon">商品描述(购票须知)</view>
|
|
|
+ <view class="know">
|
|
|
+ <view class="txt-list">服务信息</view>
|
|
|
+ <view class="txt-list">本商品支付完成即可顺利出行,无需等待确认</view>
|
|
|
+ <view class="txt-list"
|
|
|
+ >本商品无需出团通知书/确认单,预定成功后即可出行</view
|
|
|
+ >
|
|
|
+ <view class="txt-list">取消政策</view>
|
|
|
+ <view class="txt-list">按规则退</view>
|
|
|
+ <view class="txt-list">旅游者违约退改规则</view>
|
|
|
+ <view class="txt-list">购买须知</view>
|
|
|
+ <view class="txt-list"
|
|
|
+ >商品过了使用期限后将不可再使用,请您一定要在使用时间</view
|
|
|
+ >
|
|
|
+ <view class="txt-list">范围内及时使用哦</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="btn">确认</view>
|
|
|
+ <view class="btn">确认</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -90,18 +166,168 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ scenicId: uni.getStorageSync('scenicId'),
|
|
|
title: '商品详情',
|
|
|
num1: 1,
|
|
|
- num2: 2,
|
|
|
- showoperat: false
|
|
|
+ num2: 9999,
|
|
|
+ showoperat: true,
|
|
|
+ img: '',
|
|
|
+ storeList: [{ name: '所属店铺', id: '' }],
|
|
|
+ storeIndex: 0,
|
|
|
+ storeId: '',
|
|
|
+
|
|
|
+ typeList: [{ name: '商品类型(请先选择所属店铺)', id: '' }],
|
|
|
+ typeIndex: 0,
|
|
|
+ typeId: '',
|
|
|
+
|
|
|
+ shopList: [{ name: '商品名称(请先选择商品类型)', id: '' }],
|
|
|
+ shopIndex: 0,
|
|
|
+ shopId: '',
|
|
|
+
|
|
|
+ hasNameList: 0, // 判断是否有商品名称列表
|
|
|
+
|
|
|
+ lineList: [{ name: '分类(请先选择所属商品)', id: '' }],
|
|
|
+ lineIndex: 0,
|
|
|
+ lineId: '',
|
|
|
};
|
|
|
},
|
|
|
- onLoad() {},
|
|
|
+ onLoad() {
|
|
|
+ this.getShopList();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 跳转到管理分类页面
|
|
|
+ toClassify() {
|
|
|
+ console.log('我跳了');
|
|
|
+ },
|
|
|
+ // 选择店铺
|
|
|
+ changeStore(e) {
|
|
|
+ this.storeIndex = e.detail.value;
|
|
|
+ this.storeId = this.storeList[this.storeIndex].id;
|
|
|
+
|
|
|
+ // 未选择商铺不能进行商铺类型选择
|
|
|
+ if (this.storeId != '') {
|
|
|
+ this.getType();
|
|
|
+ this.getLine(); // 判断是否有商品名称列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择商品类型
|
|
|
+ changeType(e) {
|
|
|
+ this.typeIndex = e.detail.value;
|
|
|
+ this.typeId = this.typeList[this.typeIndex].id;
|
|
|
+ if (this.typeId != '') {
|
|
|
+ this.getShopName();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 商品名称选择
|
|
|
+ changeShop(e) {
|
|
|
+ this.shopIndex = e.detail.value;
|
|
|
+ this.shopId = this.shopList[this.shopIndex].id;
|
|
|
+ },
|
|
|
+ // 分类
|
|
|
+ changeClassify(e) {
|
|
|
+ this.lineIndex = e.detail.value;
|
|
|
+ this.lineId = this.lineList[this.lineIndex].id;
|
|
|
+ },
|
|
|
+ // 所属店铺
|
|
|
+ async getShopList() {
|
|
|
+ await this.$http
|
|
|
+ .get('/shop/getList', {
|
|
|
+ mid: this.scenicId,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let arr = [];
|
|
|
+ res.data.forEach((element) => {
|
|
|
+ arr.push({ name: element.name, id: element.id });
|
|
|
+ });
|
|
|
+ this.storeList = this.storeList.concat(arr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品类型
|
|
|
+ async getType() {
|
|
|
+ this.$http
|
|
|
+ .get('/type/getTypeListByShopId', {
|
|
|
+ id: this.storeId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ let arr = [];
|
|
|
+ res.data[0].children.forEach((element) => {
|
|
|
+ arr.push({ name: element.name, id: element.id });
|
|
|
+ });
|
|
|
+ this.typeList = this.typeList.concat(arr);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品名称
|
|
|
+ async getShopName() {
|
|
|
+ await this.$http
|
|
|
+ .get('/goods/getTicketGoods', {
|
|
|
+ typeId: this.typeId,
|
|
|
+ shopId: this.storeId,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ let arr = [];
|
|
|
+ res.data.forEach((element) => {
|
|
|
+ arr.push({ name: element.ticket_name, id: element.shopId });
|
|
|
+ });
|
|
|
+ this.shopList = this.shopList.concat(arr);
|
|
|
+ console.log(this.shopList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 线路分配
|
|
|
+ async getLine() {
|
|
|
+ await this.$http
|
|
|
+ .get('/goods/getCustomGroupList', {
|
|
|
+ shopId: this.storeId,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ let arr = [];
|
|
|
+ this.hasNameList = res.data.shopFrom;
|
|
|
+ res.data.customGroupList.forEach((element) => {
|
|
|
+ arr.push({ name: element.name, id: element.id });
|
|
|
+ });
|
|
|
+ this.lineList = this.lineList.concat(arr);
|
|
|
+ });
|
|
|
+ },
|
|
|
// 账号限制
|
|
|
Change(e) {
|
|
|
- console.log(e);
|
|
|
- this.showoperat = e.detail.value
|
|
|
+ console.log(e);
|
|
|
+ this.showoperat = e.detail.value;
|
|
|
+ },
|
|
|
+ subtractUser() {
|
|
|
+ if (this.num1 <= 1) {
|
|
|
+ this.$mHelper.toast('最少一天');
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.num1--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addUser() {
|
|
|
+ this.num1++;
|
|
|
+ },
|
|
|
+ subtractDate() {
|
|
|
+ if (this.num2 <= 1) {
|
|
|
+ this.$mHelper.toast('最少一张票');
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.num2--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addDate() {
|
|
|
+ this.num2++;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图片上传
|
|
|
+ uploadImg() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1, //
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
+ sourceType: ['album'], // camera 使用相机 album 从相册中选
|
|
|
+ success: function (res) { // 成功则返回图片的本地文件路径列表 tempFilePaths
|
|
|
+ console.log(res);
|
|
|
+ console.log(JSON.stringify(res.tempFilePaths));
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -121,6 +347,21 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
height: 93upx;
|
|
|
+ .uni-list-cell {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 93upx;
|
|
|
+ .uni-list-cell-db {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .selectlist {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.title {
|
|
|
font-size: 30upx;
|
|
|
color: #a3a8a8;
|
|
@@ -158,11 +399,11 @@ export default {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.operat {
|
|
|
- background-color: #f9f9f9;
|
|
|
+ background-color: #f9f9f9;
|
|
|
.menu {
|
|
|
.title {
|
|
|
font-size: 28upx;
|
|
|
- color: #232828;
|
|
|
+ color: #232828;
|
|
|
}
|
|
|
.sub,
|
|
|
.add {
|
|
@@ -171,65 +412,69 @@ export default {
|
|
|
border-radius: 50%;
|
|
|
border: 1px solid #b4b8b7;
|
|
|
color: #b4b8b7;
|
|
|
- text-align: center;
|
|
|
- line-height: 40upx;
|
|
|
- font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40upx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ color: #232828;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ color: #232828;
|
|
|
}
|
|
|
- .txt {
|
|
|
- color: #232828;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- .unit {
|
|
|
- color: #232828;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .shopicon {
|
|
|
- height: 100upx;
|
|
|
- padding: 0 33upx;
|
|
|
- font-size: 32upx;
|
|
|
- color: #232828;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 100upx;
|
|
|
- }
|
|
|
- .iconcontent {
|
|
|
- padding: 0 33upx;
|
|
|
- background-color: #f9f9f9;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100upx;
|
|
|
- .icon {
|
|
|
- display: inline-block;
|
|
|
- width: 56upx;
|
|
|
- height: 56upx;
|
|
|
- background-color: #b4b8b7;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .uploading {
|
|
|
- height: 208upx;
|
|
|
- background-color: pink;
|
|
|
- }
|
|
|
- .know {
|
|
|
- padding: 24upx 33upx;
|
|
|
- background-color: #fff;
|
|
|
- .txt-list {
|
|
|
- font-size: 26upx;
|
|
|
- color: #232828;
|
|
|
- margin-bottom: 8upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 100%;
|
|
|
- height: 98upx;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 32upx;
|
|
|
- text-align: center;
|
|
|
- line-height: 98upx;
|
|
|
- background-color: #8064f7;
|
|
|
- margin-top: 27upx;
|
|
|
- letter-spacing: 2upx;
|
|
|
- }
|
|
|
+ .shopicon {
|
|
|
+ height: 100upx;
|
|
|
+ padding: 0 33upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #232828;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 100upx;
|
|
|
+ }
|
|
|
+ .iconcontent {
|
|
|
+ padding: 0 33upx;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 200upx;
|
|
|
+ .icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 156upx;
|
|
|
+ height: 156upx;
|
|
|
+ background-color: #b4b8b7;
|
|
|
+ }
|
|
|
+ .shopLogo {
|
|
|
+ width: 156upx;
|
|
|
+ height:156upx;
|
|
|
+ background-color: green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uploading {
|
|
|
+ height: 208upx;
|
|
|
+ background-color: pink;
|
|
|
+ }
|
|
|
+ .know {
|
|
|
+ padding: 24upx 33upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .txt-list {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #232828;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 98upx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32upx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 98upx;
|
|
|
+ background-color: #8064f7;
|
|
|
+ margin-top: 27upx;
|
|
|
+ letter-spacing: 2upx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|