|
|
@@ -1,37 +1,235 @@
|
|
|
<template>
|
|
|
- <view class="shopdetail">
|
|
|
- <Header :title="title"></Header>
|
|
|
- <view class="" style="height: 94upx;"></view>
|
|
|
- <view class="shopdetail-content">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
+ <view class="shopdetail">
|
|
|
+ <Header :title="title"></Header>
|
|
|
+ <view class="" style="height: 94upx;"></view>
|
|
|
+ <view class="shopdetail-content">
|
|
|
+ <!-- 所属店铺 -->
|
|
|
+ <view class="shop detail-list">
|
|
|
+ <view class="menu">
|
|
|
+ <view class="title">所属店铺</view>
|
|
|
+ <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ </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>
|
|
|
+ </view>
|
|
|
+ <!-- 商品名称 -->
|
|
|
+ <view class="shopname detail-list">
|
|
|
+ <view class="menu">
|
|
|
+ <view class="title">所属店铺</view>
|
|
|
+ <image src="../../static/images/moreicon.png" class="more"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 自定义分类 -->
|
|
|
+ <view class="classify detail-list noborder">
|
|
|
+ <view class="menu">
|
|
|
+ <view class="title bigtitle">自定义分类</view>
|
|
|
+ <view class="txt">管理分类</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>
|
|
|
+ </view>
|
|
|
+ <!-- 账号限制 -->
|
|
|
+ <view class="idastrict detail-list noborder">
|
|
|
+ <view class="menu">
|
|
|
+ <view class="title astricttitle">账号限制</view>
|
|
|
+ <switch @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="txt">天内最多购买</view>
|
|
|
+ <view class="sub">-</view><text class="num2">{{ num2 }}</text
|
|
|
+ ><view class="add">+</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">
|
|
|
|
|
|
-<script>
|
|
|
- import Header from '../components/header.vue';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Header
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title: '商品详情'
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
+ </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>
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ <view class="btn">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+<script>
|
|
|
+import Header from '../components/header.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '商品详情',
|
|
|
+ num1: 1,
|
|
|
+ num2: 2,
|
|
|
+ showoperat: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ // 账号限制
|
|
|
+ Change(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.showoperat = e.detail.value
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .shopdetail {
|
|
|
- .shopdetail-content {
|
|
|
- padding: 24upx 32upx 44upx;
|
|
|
+.shopdetail {
|
|
|
+ .shopdetail-content {
|
|
|
+ padding: 24upx 0 0upx;
|
|
|
+ .detail-list {
|
|
|
+ padding: 0 33upx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1px solid #e7e7e7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .menu {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 93upx;
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #a3a8a8;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ width: 15upx;
|
|
|
+ height: 26upx;
|
|
|
+ }
|
|
|
+ .bigtitle {
|
|
|
+ font-size: 34upx;
|
|
|
+ color: #232828;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ color: #a95cff;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .linetitle {
|
|
|
+ color: #232828;
|
|
|
+ }
|
|
|
+ .astricttitle {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #232828;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noborder {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .classify {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ }
|
|
|
+ .idastrict {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .operat {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ .menu {
|
|
|
+ .title {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #232828;
|
|
|
+ }
|
|
|
+ .sub,
|
|
|
+ .add {
|
|
|
+ width: 44upx;
|
|
|
+ height: 44upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #b4b8b7;
|
|
|
+ color: #b4b8b7;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40upx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
